这篇文章将详细介绍如何在7B2和子比主题中实现文章缩略图的鼠标滑过动画效果。这种效果不仅能为你的文章展示增添视觉吸引力,还可以提升用户体验。通过简单的设置和代码,你的网站将拥有更加动感的缩略图展示效果,无论是7B2还是子比主题,兼容性都非常好,让你的网站更具吸引力!
都是添加到主题的style.css文件里面,也可以在后台添加到自定义css里~
B2修改方法
/*B2文章划过动画图片开始 - 90LHD.COM-惦记博客*/ .post-module-thumb:after { content: ""; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(https://www.90lhd.com/favicon.ico); background-repeat: no-repeat; background-size: 100% 100%; z-index: 3; -webkit-transform: scale(2); transform: scale(2); transition: opacity .75s, -webkit-transform .75s; transition: transform .75s, opacity .75s; transition: transform .75s, opacity .75s, -webkit-transform .75s; opacity: 0; pointer-events: none; } .post-module-thumb: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; } .post-module-thumb:hover:before { background: rgba(0,0,0,.5) } .post-module-thumb:hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } /*B2文章划过动画图片结束*/
子比修改方法
/*文章主图hover美化开始*/ .item-thumbnail:after { content: ''; position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: url(https://www.90lhd.com/favicon.ico); background-repeat: no-repeat; background-size: 100% 100%; z-index: 3; -webkit-transform: scale(2); transform: scale(2); transition: opacity .75s, -webkit-transform .75s; transition: transform .75s, opacity .75s; transition: transform .75s, opacity .75s, -webkit-transform .75s; opacity: 0; pointer-events: none; } .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:hover:before { background: rgba(0,0,0,.5) } .item-thumbnail:hover:after { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } /*文章主图hover美化结束*/