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

虫子君
虫子君
虫子君
660
文章
278
评论
2019年12月10日23:41:36来源:叶忠文 评论 1,086 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
纯代码实现知更鸟begin主题弹窗公告 WordPress功能扩展

纯代码实现知更鸟begin主题弹窗公告

begin主题自己使用的时间长了以后,大部分知更鸟原有的主题功能已经完全可以满足自己的实际需求,对于新的功能并没有过高的需求,所以更新主题都没什么动力。今天在逛博客的时候发现有个站长做了一个begin...
纯CSS实现WordPress底部增加水波动画效果 WordPress功能扩展

纯CSS实现WordPress底部增加水波动画效果

网站美化这个事情似乎是一个没有尽头的事情,就像虫子君现在的网站一样,虽然现在我已经觉得非常的漂亮了,但还是觉得有时候哪里缺少一点什么,似乎网站美化这个这个事情,就仿佛这一辈子都没完没了一样的。 嗯哼,...
begin主题代码高亮样式美化 WordPress教程

begin主题代码高亮样式美化

对于begin主题,虽然有着非常强大的功能,但是对于一些细节的把控,没有ui设计的鸟叔还是稍微有点力不从心。几乎每一次虫子君从鸟叔那里拿到新版的主题以后,都会自己调整一下。 这次调整了一下being主...
WordPress主题增加关注微信才能查看内容的功能 WordPress教程

WordPress主题增加关注微信才能查看内容的功能

做微信公众号的朋友有时候也会有自己的网站,用来存放历史文章,第一是可以方便我们的管理,另一个就是可以随时让小伙伴们在网站上面搜索。那就是是需要一个可以将流量转换成粉丝的一个功能,毕竟现在流量为王的年代...
在自己的WordPress博客中增加一个视频解析的页面 WordPress教程

在自己的WordPress博客中增加一个视频解析的页面

先声明一下,这是一个存在被封风险的操作,虫子君已经测试过,自己的另一个网站就这样被腾讯给封闭的,导致现在百度还不收录。 代码部分,来自文字咖,并非虫子君自己写的。 其中需要同学们介绍的几点知识,其中最...

您必须才能发表评论!