添加CSS3图片呼吸灯特效-鼠标悬浮还有放大效果
作者:matrix 被围观: 5,616 次 发布时间:2013-10-13 分类:Wordpress 零零星星 | 一条评论 »
这是一个创建于 4017 天前的主题,其中的信息可能已经有所发展或是发生改变。
测试是用于NGRO主题的首页文章列表上,配合起之前的窗口小列表 不错~
带8px白色边框鼠标停留后还有放大效果,如图:
.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代码。
中午好