添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果

作者:Matrix 被围观: 2,915 次 发布时间:2013-10-13 分类:wordpress建站 拷贝型 码字型 零零星星 | 一条评论 »

NOTICE:这是一个创建于 1149 天前的主题,其中的信息可能已经有所发展或是发生改变。

测试是用于NGRO主题的首页文章列表上,配合起之前的窗口小列表 不错~

带8px白色边框鼠标停留后还有放大效果,如图:

添加css3图片呼吸灯特效

  1. .Indexpost img {  
  2.     padding8px;  
  3.     background-color#FFF;  
  4.     box-shadow: 0px 0px 18px rgba(0,0,0,.4);  
  5.     -webkit-transition: all ease .3s;  
  6.     transition: all ease .3s  
  7. }  
  8.   
  9. .Indexpost img {  
  10. margin-right10px;  
  11.     width:140px;  
  12.     height:100px;  
  13.     overflow:hidden;  
  14. floatleft;  
  15. }  
  16. .Indexpost img:hover {  
  17.     -webkit-transform: scale(1.05);  
  18.     transform: scale(1.05);  
  19.     box-shadow: 0px 0px 18px rgba(0,0,0,.5);  
  20. }  

说明:这是笔者自己主题的css代码。

6行.3s为放大过程的时间0.3秒

17行1.05为放大的值。

其他的参数我也不清楚,不管谦虚还是其他的来说我很菜。

我这原本首页样式是post的,改成.Indexpost样式也为了独立修改的方便。大致样式跟.post一样,只是修改了.Indexpost img。

如果你也感觉到此效果不错,不嫌弃的话可以参考我这的css代码。

建议参考:图片呼吸灯,css3图片阴影+鼠标移上放大图片

本文固定链接:http://www.hhtjim.com/add-css-3-pictures-breathing-light-effects-a-mouseover-and-amplification-effect.html
Matrix
本文章由 Matrix 于2013年10月13日发布在wordpress建站, 拷贝型, 码字型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果-HHTjim'S 部落格
关键字:, ,

有1条评论 »

  1. 微乐论坛 微乐论坛 2015-4-8 11:55:01 +0800#1

    中午好

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!