我有一个社交按钮,可以在悬停时更改图像。运行良好
<a href="#">
<img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/>
</a>
我的CSS:
.social-fb:hover {
content:url("http://i.imgur.com/bU0lzac.png");
}
但是我怎样才能制作一些动画,比如当我悬停时,随着图像的变化,会有一个动画。任何动画都可以。谢谢!
最佳答案
您可以使用以下 css 来执行脉冲:
.social-fb:hover {
content: url("http://i.imgur.com/bU0lzac.png");
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
<a href="#">
<img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb " />
</a>
<a href="#">
<img src="http://i.imgur.com/bU0lzac.png" />
</a>
关于jquery - 改变图像CSS jquery的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32886747/