最近在网上看到很多知更鸟主题的文章列表页的“阅读全文”作了美化处理,效果就是鼠标没有到文章这个区块时,不显示阅读全文位置。当鼠标滑到文章区块时,就会从旁边自动滑出显示阅读全文按钮。最近有小伙伴在问到,也就分享出来了。
效果图:
代码部署:
将以下css代码添加到主题选项-定制风格-自定义样式中即可,或者自行添加到主题css文件中。
- /*阅读全文特效*/
- .post{overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}
- .post:hover{box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2;box-shadow:0 0 20px 3px #dfe9f7;border:1px solid #eaeaea;z-index:2;border:1px dashed #39c}
- .entry-more a{position:absolute;width:82px;rightright:-80px;webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;opacity:0}
- .post:hover .entry-more a{rightright:0;opacity:.7}
自用的代码:
- .entry-more a {
- opacity:0
- }
- .post:hover .entry-more a {
- rightright:0;
- opacity:1;
- }
- .post {
- transition:all 0.3s ease 0s;
- }
- .post:hover {
- transform:translateY(-3px);
- z-index:1;
- -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
- }
掘金网建议新手小白们不用太纠结有关技术层面的东西,这些技术自己如果实在无力拿下的话,完全可以付费来给你搞定的,掘金网目前就提供这样的付费技术支持服务《去付费》,花钱不多可以买个保障和安全,有需要的可以联系掘金网。