示例:鼠标激活CSS动画Ⅱ
感谢 Cesaryuan 大佬的代码
它的效果是鼠标移动到上面产生动画,动画结束后会恢复初始状态。
把鼠标移动到上面看看效果
代码如下:
<!-------------鼠标放上去它会动哦---------------->
<style>
.classname:hover {
animation-name: jello;
animation-duration: 1.4s;
}
@keyframes pulse {
0% {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
50% {
-webkit-transform: scale3d(2.15,3.15,3.15);
transform: scale3d(1.15,1.15,1.15)
}
to {
-webkit-transform: scaleX(1);
transform: scaleX(1)
}
}
</style>
<!-------------鼠标放上去它会动哦---------------->
再插入Class里:classname 即可(如下)
class="classname"