给图片加上放大滤镜


在大发了看到了这款图片放大效果,觉得蛮有意思,于是向他求教弄过来了。效果就是给图片加了个hover特效,鼠标移动到文章图片上时,图片就会自动放大,然后再自动缩回原大小。有想尝试一下的朋友可以试试。

在主题CSS文件中,找到文章图片的字段,以我的为例是“.post img:hover“字段,在其属性里加上以下代码就可以了:
-moz-animation-name: pulse;
-moz-animation-duration: 2s;
-moz-animation-timing-function:ease;
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function:ease;}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes pulse{
0%{-moz-transform:scale(1)}
50%{-moz-transform:scale(1.1)}
100%{-moz-transform:scale(1)}
}

因为我又看中了另一个hover效果,所以没有演示了,可以自己尝试一下。

15 条评论

  1. 加一些简单的CSS3效果就行了,BLOG和网站的动态效果,个人感觉用来做点缀即可~

    1. 俺在文末交代了,= =!
      “因为我又看中了另一个hover效果,所以没有演示了”