作者:matrix 被围观: 4,949 次 发布时间:2013-10-13 分类:Wordpress 零零星星 | 一条评论 »
这是一个创建于 3244 天前的主题,其中的信息可能已经有所发展或是发生改变。
测试是用于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代码。
建议参考:图片呼吸灯,CSS3图片阴影+鼠标移上放大图片