《 网站图片获取焦点hover摇晃摆动 》
我是设置了只有文章的图片会摆动。
<style>
@-moz-keyframes tada{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}}
.post-content img:hover{
-webkit-animation: tada 1s .2s ease both;
-moz-animation: tada 1s .2s ease both;
}
</style>
由于我是先用插件外部测试css,所以多加个</style>
标签,如果你放到内部css文件里面去引用去除这个标签的开始和结束就好了。.post-content img
是定位图片所在的位置,说白了就是需要哪里的图片有这个摆动效果。
本文链接:https://weich.ee/archives/26.html
- 上新一篇: 魅族手机打开安卓原生系统多用户
- 下旧一篇: html中的a链接target四种跳转打开方式