如何在頁面加載時在圖像上創建脈衝效果幾秒鐘？

我正在嘗試在圖像上創建一個脈衝效果，但目前爲止還沒有工作。我曾嘗試到span元素和它的作品像：如何在頁面加載時在圖像上創建脈衝效果幾秒鐘？

HTML：

<span class="pulse"></span>

CSS：

.pulse { 
    margin:100px; 
    display: block; 
    width: 22px; 
    height: 22px; 
    border-radius: 50%; 
    background: #cca92c; 
    cursor: pointer; 
    box-shadow: 0 0 0 rgba(204,169,44, 0.4); 
    animation: pulse 2s infinite; 
} 
.pulse:hover { 
    animation: none; 
} 

@-webkit-keyframes pulse { 
    0% { 
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    } 
    70% { 
     -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
    } 
    100% { 
     -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
    } 
} 
@keyframes pulse { 
    0% { 
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    } 
    70% { 
     -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
     box-shadow: 0 0 0 10px rgba(204,169,44, 0); 
    } 
    100% { 
     -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
     box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
    } 
}

我想同與此圖像：

<a href="javascript:void(0)" class="item"> 
    <img src="https://image.ibb.co/cNjXna/guided_inv_icon.png" alt=""> 
</a>

加載頁面時，圖像應該具有脈衝效果，或者僅在圖像稍微變大2秒爲了表示交互性，然後圖像應保持原來的形狀。

有什麼建議嗎？

我創造了這個筆：https://codepen.io/maketroli/pen/ZyOJYM

編輯

我需要創建下面的黃色圓圈的圖像中相同的效果。由span製成的黃色圓圈正在按照下圖所示完成。

來源

2017-06-13 TheUnnamed

你的小提琴工作正常。那麼，什麼是錯的？ – Justinas

'.pulse：hover {animation：none; }'應該在默認情況下與'animation：pulse 2s infinite;'交換。您希望在懸停期間製作動畫。 –

@Justinas'span'工作正常。不是圖像。我想在該圖像中創建，就像那裏的黃色圓圈一樣。 – TheUnnamed

您可以將相同的動畫應用於圖像，類似於將動畫應用於span元素的方式。

.item img{ 
animation: pulse 2s infinite; 
}

退房此pen

EDIT

對於顯示出持續2秒鐘一個更大的圖像，然後將其還原到正常大小，我已經添加了magnified動畫。

@keyframes magnified{ 
0%{ 
transform: scale(1.2,1.2); 
} 
70%{ 
transform: scale(1.2,1.2); 
} 
100%{ 
transform: scale(1,1); 
} 
}

而且你可以將元素添加多個動畫：

.item img{ 
animation: pulse 2s infinite, magnified 2s 1; 
}

我已經更新了pen顯示這些效果。

來源

2017-06-13 06:26:31 Haris

添加'infinite'代替1-這裏：'項IMG { 動畫：脈衝2S無限的，放大2S無限;然後它顯示整個圖像的精確脈衝效果。 –

您可以使用下面的代碼行來使用HTML和CSS3執行脈動動畫效果：在這裏，我使用了css的關鍵幀屬性來執行動畫效果。

<span class="pulse"></span> 

<style> 
.pulse { 
    margin:100px; 
    display: block; 
    width: 52px; 
    height: 52px; 
    border-radius: 50%; 
    background: #ff8717; 
    cursor: pointer; 
    box-shadow: 0 0 0 rgba(204,169,44, 0.4); 
    animation: pulse 2s infinite; 
} 
.pulse:hover { 
    animation: none; 
} 

@keyframes pulse { 
    0% { 
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4); 
    } 
    70% { 
     -moz-box-shadow: 0 0 0 30px rgba(204,169,44, 0); 
     box-shadow: 0 0 0 30px rgba(204,169,44, 0); 
    } 
    100% { 
     -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
     box-shadow: 0 0 0 0 rgba(204,169,44, 0); 
    } 
} 


</style>

來源

2018-03-02 06:38:03

如何在頁面加載時在圖像上創建脈衝效果幾秒鐘？

回答

相關問題