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

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

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

.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图片阴影+鼠标移上放大图片

03-04 14:56