为阅读全文字样添加特效

  • A+
所属分类:WordPress 建站经验

这个代码只针对知更鸟主题用户,其他用户需要自行修改。效果展示:

为阅读全文字样添加特效

为阅读全文字样添加特效

有两种代码,两种效果,知更鸟主题的用户可以添加到外观->主题设置->定制风格->自定义样式里面。

第一种,不加阴影的

/*阅读全文特效*/
.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}

第二种,阴影效果

此处为隐藏的内容!
发表评论并刷新,方可查看
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: