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

作者:matrix 被围观: 5,616 次 发布时间:2013-10-13 分类:Wordpress 零零星星 | 一条评论 »

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

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

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

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

.Indexpost img {  
    padding: 8px;  
    background-color: #FFF;  
    box-shadow: 0px 0px 18px rgba(0,0,0,.4);  
    -webkit-transition: all ease .3s;  
    transition: all ease .3s  
}  

.Indexpost img {  
margin-right: 10px;  
    width:140px;  
    height:100px;  
    overflow:hidden;  
float: left;  
}  
.Indexpost img:hover {  
    -webkit-transform: scale(1.05);  
    transform: scale(1.05);  
    box-shadow: 0px 0px 18px rgba(0,0,0,.5);  
}  

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

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

17行1.05为放大的值。

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

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

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

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

其他文章:
本文固定链接:https://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

    中午好

添加新评论 »

 🙈 😱 😂 😛 😭 😳 😀 😆 👿 😉 😯 😮 😕 😎 😐 😥 😡 😈 💡

插入图片

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