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

  • 2
  • 17 views
  • A+
所属分类:wordpress主题

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

知更鸟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)
    }

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

Joson

发表评论

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

目前评论:2   其中:访客  2   博主  0

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

      不错,学习了

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

        不错不错,学习了