美化知更鸟begin主题的插入文章模块更绚丽

虫子君
虫子君
虫子君
560
文章
260
评论
2019年12月10日23:41:36来源:叶忠文 评论 537 1256字阅读4分11秒

各种各样的美化,各种各样的要求,一千个人就有一千种神奇的想法,所以对于主题的美化虫子君也从来没有满足过。今天在叶忠文的博客当中浏览的时候发现一个不错的效果。就是当使用begin主题在文章内页当中插入文章的时候,可以实现一个非常酷炫的效果,这点深的我心啊。果断的将代码给扒了过来。

美化知更鸟begin主题的插入文章模块更绚丽

经常使用知更鸟begin主题的用户们一定不陌生的一个功能,就是在WordPress后台写文章的时候,可以直接插入文章的,只是这个功能被知更鸟做成了一个手动的功能,需要自己将文章的链接,还有图片以及描述等等信息粘贴到对应的“值”后面,才能够享受到这样的一个效果。

但是很多用户往往会觉得程序员的审美能力非常的“low”所以,各种各样的美化吧(虽然很多人的美化谈不上美化,甚至可以说是丑化,可是还是有不少的用户乐此不疲,比如:隔壁)今天实现的功能就在下图!

美化知更鸟begin主题的插入文章模块更绚丽

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

注:在WordPress真的themes的文件夹当中,找到begin主题的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需要全部删除,最后将下面代码加在样式表内:

//虫子君转载自叶忠文博客https://www.japanren.com/2010.html
.post:hover .entry-more a:after {
transform: translateY(10%) translateX(-25px) rotate(-45deg)
}

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

展开全文
  • 版权声明:本文源自 叶忠文 整理发表于2019年12月10日23:41:36
  • 转载注明:https://chonzi.com/8605.html

您必须才能发表评论!