我一直在使用以下代码跟踪 CSS 关键帧动画示例:-
.pulse-animation {
margin: 50px;
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
background: #ff8717;
cursor: pointer;
animation: pulse 2s infinite;
float: left;
}
.pulse-animation: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);
}
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />
我尝试使动画仅适用于悬停,但没有奏效,我也尝试更改悬停动画,但仍然无法正常工作,所以任何人都可以提供帮助。
:hover
是当您将鼠标置于该元素上方时的状态。当您不悬停时,您不希望有动画,因此您将其设置animation: none;
为默认状态.pulse-animation
。如果您将班级悬停,.pulse-animation
那么您将设置animation: pulse 2s infinite;
看下面的例子
.pulse-animation {
margin: 50px;
display: block;
width: 52px;
height: 52px;
border-radius: 50%;
background: #ff8717;
cursor: pointer;
animation: none;
float: left;
}
.pulse-animation:hover {
animation: pulse 2s infinite;
}
@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);
}
}
<span class="pulse-animation"></span>
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/1.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/2.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/3.jpg" />
<img class="pulse-animation" src="https://randomuser.me/api/portraits/women/4.jpg" />
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句