当鼠标放上去,就有一个聚焦的效果,这个可以直接使用CSS样式来实现,效果如下:
![图片[1]-Zibll子比主题美化,文章缩略图添加动态圆圈效果-北忘山博客](https://cdn.beiwangshan.com/uploads/2023/02/c04f335d38101319.png)
实现的代码,大家放在主题自定义CSS代码处即可:
/*文章缩略图的动态圆圈 开始*/
.item-thumbnail:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0);
transition: background .35s;
border-radius: 8px;
z-index: 2;
max-width: 765px;
margin: 0 auto;
pointer-events: none;
}
.item-thumbnail:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background: url(//001.pipixiaozhan.cn/images/comimages.png);
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: 3;
-webkit-transform: scale(2);
transform: scale(2);
transition: opacity .35s,-webkit-transform .35s;
transition: transform .35s,opacity .35s;
transition: transform .35s,opacity .35s,-webkit-transform .35s;
opacity: 0;
pointer-events: none;
}
.item-thumbnail:hover:before {
background: rgba(0,0,0,.5)
}
.item-thumbnail:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
/*文章缩略图的动态圆圈 结束*/
© 版权声明
THE END
暂无评论内容