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

HHTjim 部落格

发布于 2022-09-26 11:27:18

1.2K0

发布于 2022-09-26 11:27:18

文章被收录于专栏：HHTjim'S 部落格

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css