给图片加上放大滤镜

| 折腾 | 8,083 views | 15 replies


在大发了看到了这款图片放大效果，觉得蛮有意思，于是向他求教弄过来了。效果就是给图片加了个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 条评论

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

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