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

给TA买糖
共{{data.count}}人
人已赞赏
wordpress

柒比贰 seven 主题右侧悬浮菜单美化

2020-2-1 10:16:57

wordpress

WordPress多域名访问同一站点实现方法

2020-2-2 9:23:44

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索