代码部署:
效果一:
在鼠标没有到文章这个区块时,不显示阅读全文位置。当鼠标滑到文章区块时,就会从旁边自动滑出显示阅读全文按钮。
将以下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;right:-80px;webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;opacity:0} .post:hover .entry-more a{right:0;opacity:.7}
鼠标未到文章区块时效果图
鼠标滑到文章区块时效果图
效果二:
将以下css代码添加到主题选项-定制风格-自定义样式中即可,或者自行添加到主题css文件中。
在鼠标没有到文章这个列表区块时,不显示阅读全文位置。当鼠标滑到文章区块时,显示阅读全文按钮和列表会浮动一下。
- .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;
- }
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
2019年6月27日 17:36 沙发
感谢