给网页添加图片抖动效果源码网站图片抖动怎么实现

2018-09-06
0评论
/
阅读
管理员

今天发现在某个网站发现一个非常有意思的事情。就是把鼠标放在图片上面的时候图片会抖动。感觉非常有意思,去网上找了下资料,发现实现的方法非常有意思而且很简单。下面就说下怎么实现网页图片抖动的效果。

ZBlog博客模版添加图片选中抖动效果 给网页添加图片抖动效果源码网站图片抖动怎么实现

如何给网站图片添加抖动动态效果。把下面的CSS代码放在网站模版的CSS文件里面,一般是style.CSS,一般是所以网站都是通用的。

img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}

本站附件分享,如附件失效,可以去找找看
诚通网盘附件百度网盘附件
PS:由于百度网盘附件太大,所以百度网盘附件为拆分压缩,全部下载后打开zip后缀文件即可。也可以只下载zip后缀文件查看(只可以查看不能解压)是否有需要的文件,再下载全部文件解压需要的文件


干饭福利分享: 微信扫码领取“饿了么”抵用券↓↓↓↓↓↓↓↓↓↓

标签: ZBlog php 图片 CSS
于2018-09-06发布