Loading
0

begin主题首页阅读全文按钮美化自动缩进显示

技术小学生微信公众号
腾讯云服务器大促销。
华为服务器

知更鸟begin主题的美化,太多太多,根据自己的喜好来折腾。这里,在之前折腾了下,美化了首页阅读全文按钮。最近有小伙伴在问到,也就分享出来了。

将以下css添加到主题选项–定制风格–自定义样式中即可。或者自行添加到css中。

  1. /*阅读全文特效*/
  2. .post{overflow:hidden;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s}
  3. .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}
  4. .post:hover .entry-more a{right:0;opacity:.7}

在鼠标没有到文章这个区块时,不显示阅读全文位置。当鼠标滑到文章区块时,就会从旁边自动滑出显示阅读全文按钮。

begin主题首页阅读全文按钮美化

鼠标未到文章区块时效果图

begin主题首页阅读全文按钮美化

鼠标滑到文章区块时效果图

代码也是我在网上找的,不过不知道是来自谁那了,这个折腾有点久了。

 

技术小学生微信公众号
华为服务器
腾讯云服务器大促销。

声明:站长码字很辛苦啊,转载时请保留本声明及附带文章链接:https://blog.tag.gg/showinfo-19-18705-0.html
亲爱的:若该文章解决了您的问题,可否收藏+评论+分享呢?
上一篇:wordpress一段自定义滚动显示问候语代码
下一篇:给begin主题友情链接页面添加评论