知更鸟Begin主题首页阅读全文按钮美化自动缩进显示 – WordPress美化

王小优
王小优
王小优
231
文章
0
评论
2015年7月8日 评论 6,312 1069字阅读3分33秒
摘要

知更鸟Begin主题的美化,太多太多了,最近在诗梦博客看到,美化了首页列表鼠标移动显示阅读全文按钮等样式,最近有小伙伴在问到,也就分享出来了。

知更鸟Begin主题首页阅读全文按钮美化自动缩进显示 – WordPress美化

代码部署:

效果一:

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

将以下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;rightright:-80px;webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s;opacity:0}
  4. .post:hover .entry-more a{rightright:0;opacity:.7}

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

知更鸟Begin主题首页阅读全文按钮美化自动缩进显示 – WordPress美化

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

知更鸟Begin主题首页阅读全文按钮美化自动缩进显示 – WordPress美化

注:最新版Begin主题已实现此功能。

效果二:

将以下CSS代码添加到主题选项→定制风格→自定义样式中即可,或者自行添加到主题CSS文件中。

在鼠标没有到文章这个列表区块时,不显示阅读全文位置。当鼠标滑到文章区块时,显示阅读全文按钮和列表会浮动一下

  1. .entry-more a {
  2.     opacity:0
  3. }
  4. .post:hover .entry-more a {
  5.     rightright:0;
  6.     opacity:1;
  7. }
  8. .post {
  9.     transition:all 0.3s ease 0s;
  10. }
  11. .post:hover {
  12.     transform:translateY(-3px);
  13.     z-index:1;
  14.     -webkit-box-shadow:0 15px 32px rgb(175,135,255)!important;
  15. }
若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
为WordPress最新文章增加NEW最新提示标志 WordPress美化

为WordPress最新文章增加NEW最新提示标志

纯代码给WordPress文章列表中新发布的文章增加NEW新文章提示,让你的博客更加饱满、人性化,一起跟王小优折腾起来。 看到不少网站的新文章后面都会有一个提示最新文章的文字或者图片,感觉比较人性化,...
匿名

发表评论

匿名网友 填写信息

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