知更鸟Begin主题首页与栏目页阅读全文按钮效果

2019年8月14日08:04:34 6 502 views 977字阅读3分15秒

今天悄然在去看你博客里看到首页与栏目页里的阅读全文按钮的美化效果,感觉也是别有一般风味,在此之前我看到过很多诸如这方面的美化了。不过说归说,每种美化都有每种美化的特色,这就要看个人的喜好了。所谓:萝卜青菜各有所爱!

知更鸟Begin主题首页与栏目页阅读全文按钮效果

就像叶忠文博客里的阅读全文按钮,虽说不是和此篇教程里的一样美化,但也觉得挺不错的。只是我这个人比较懒罢了,美化后的效果如果不是太难看就不想再重新设置了。具体效果的话朋友们可以看此图下的展示图!

知更鸟Begin主题首页与栏目页阅读全文按钮效果

当鼠标滑到文章区块时,按钮高光就像拉帘一样拉开,就像我们网站上的LOGO特效显示一样,这里面的代码需要修改原主题内的按钮属性和值。好了!话不多说,我们进入此效果的特点教程吧。

1、打开主题中的style.css文件后搜索 .entry-more a 将下面的代码进行替换:

    .entry-more a {
        position: absolute;
        right: -1px;
        bottom: 18px;
        z-index: 1;
        float: left;
        overflow: hidden;
        margin-right: 2.5em;
        padding: 0 9pt;
        width: auto;
        background: #56c5ff;
        color: #fff!important;
        text-align: center;
        font-weight: 400;
        line-height: 30px;
        cursor: pointer
    }
    .entry-more a:after {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 500%;
        height: 1000%;
        background: #3690cf;
        content: "";
        transition: transform .3s;
        transform: translateX(calc(20% - 25px)) translateY(10%) rotate(-45deg);
        transform-origin: 0 0
    }

2、注意原主题中.entry-more a:hover需要全部删除,最后将下面代码加在样式表内:

    /*去看你博客阅读全文按钮美化*/
    .post:hover .entry-more a:after {
        transform: translateY(10%) translateX(-25px) rotate(-45deg)
    }

完成之后,只需要将网页强制刷新下就可以看的到效果了!

叶先生
  • 本文由 发表于 2019年8月14日08:04:34
如何快速切换WordPress里的背景图 WordPress

如何快速切换WordPress里的背景图

用过WordPress主题建站的人多半都切换过背景图,就拿本人来说,之前用鸟哥这款Begin主题的时候,就为了追求各种美化加过网站背景图与评论区背景图,还加过自定义鼠标样式,但后期还是因为想要简单简洁...
如何替换WordPress博客的自定义栏目值 WordPress

如何替换WordPress博客的自定义栏目值

我们都知道如果之前添加的自定义栏目值,例如说:附件或者图片链接的地址发生改变,修改起来都是比较麻烦的。好久没进鸟哥的官网看了,今天进去看到这么一个教程感觉挺实用的,里面有篇文章讲到附件或者图片链接的地...
WordPress网站如何更换域名的详细教程讲解 WordPress

WordPress网站如何更换域名的详细教程讲解

WordPress网站如何更换域名?使用WordPress主题建站这么长时间以来,见过很多站长不停的更换网站域名,但不会更换里面的内容。其实这个方法不算新颖,因为在这个方法之前,鸟哥的Begin主题里...
修改数据库密码后导致网站无法打开该怎么解决? 网站建设

修改数据库密码后导致网站无法打开该怎么解决?

今天无缘无故不知道发什么癫,一时兴起,想统一下阿里后台的登录密码,接着把FTP密码也给重置了遍,后面想了下,要不就把数据库密码也统一下吧。统一好了后方才发现网站打不开了,顿时有点百思不得其解,以前用织...
匿名

发表评论

匿名网友 填写信息

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

评论:6   其中:访客  4   博主  2
    • 南旭东博客 南旭东博客 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信 1

      不错,学习了

      • 南旭东博客 南旭东博客 来自天朝的朋友 谷歌浏览器 Windows 7 陕西省西安市 电信 1

        不错不错,学习了

        • 去看你博客 去看你博客 来自天朝的朋友 QQ浏览器 Windows 10 江西省九江市 电信 1

          哈哈,其实我感觉这个按钮在PC端还是挺好看的 :lol:

            • Joson Joson 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市 电信

              回复 去看你博客 我也觉得是,等下次换新主题的时候我也会考虑用这种

            • 虫子君 虫子君 来自天朝的朋友 谷歌浏览器 Windows 10 广东省深圳市 联通 0

              哈哈哈,看了你的文章还可以,但是这个效果不明显啊,大佬。我也写了一个类似的,不过我得到主题的时间较短,所以只是优化了一下阅读全文的按钮。

                • 叶先生 叶先生 来自天朝的朋友 火狐浏览器 Windows 10 广东省深圳市宝安区 电信

                  回复 虫子君 不不不、大佬不敢当,相互学习嘛,有空我也去学学你的,好的东西都是要拿出来分享的 :grin: :grin: :grin: