示例:鼠标激活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"