柒比贰 网站美化主题系列|模版7B2-分类封面添加波浪特别效果&每日诗词

  柒比贰 网站美化主题系列|模版7B2-分类封面添加波浪特别效果&每日诗词

【WordPress主题】柒比贰7b2去授权无限制版[更新至V2.9.8]

  【源码说明】   听说大家都想用柒比贰主题?   没问题,去授权的柒比贰主题他**********来了!   2.9.8更新,修复了一些页面404的bug   1、支付更新....


  效果如图:
20200103-3f53638dc4a65.gif
  代码: 

首先在style.css样式表里添加波浪样式
/*浪来了*/
.lang {
    overflow: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    margin-top: -55px;
}

.lang__1 {
    background: url(https://dl.zhutix.net/2019/08/wave_01.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 18s infinite cubic-bezier(0.04, 1.07, 0.65, 0.05);
    position: absolute;
    top: 8px;
}

.lang__2 {
    background: url(https://dl.zhutix.net/2019/08/wave_02.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 12s infinite linear;
    position: relative;
    top: 0;
}

.lang__3 {
    background: url(https://dl.zhutix.net/2019/08/wave_03.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 18s infinite linear;
    position: absolute;
    top: 0;
}

.lang__4 {
    background: url(https://dl.zhutix.net/2019/08/wave_04.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 12s infinite linear;
    position: relative;
    top: 0;
}

.lang__5 {
    background: url(https://dl.zhutix.net/2019/08/wave_05.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 18s infinite linear;
    position: absolute;
    top: 0;
}

.lang__6 {
    background: url(https://dl.zhutix.net/2019/08/wave_06.png) repeat-x;
    width: 7000px;
    height: 60px;
    animation: langs 12s infinite linear;
    position: relative;
    top: 0;
}

.author .lang {
    margin-top: -132px;
}

.footer  .lang {
    margin-top: -55px;
}

@keyframes langs {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1938px;
    }
}

@-webkit-keyframes langs {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1938px;
    }
}
/*浪完了*/

  首先是默认的没有类描述,新增换行每日诗词。(这个很好理解吧)如下图
20200103-4389c6b92be18.png
以下几处代码均在主题根目录下的/category.php 文件内修改。

把<div class=”cat-title pos-a lm”> … </div> 这一段换成下边的代码即可

<div class="cat-title pos-a lm">
            <h1 class="mar10-b shadow"><?php echo get_the_archive_title('',false); ?></h1>
            <p class="shadow"><?php echo $des ? $des : __('还没有描述...<br>
            <span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script></p>','ziranzhi2'); ?></p>
        </div>

由于波浪动画会遮挡 上传分类封面图片 按钮。我们给 上传分类封面图片 按钮用css置顶 效果如下图
20200103-f4c3df3239ab2.png
在上传分类封面图片 按钮 <span>标签里添加样式 style=”z-index:999″

添加前
<span class="pos-a cat-button mobile-hide" v-if="isAdmin" >
全选复制
修改后

<span class="pos-a cat-button mobile-hide" v-if="isAdmin" style="z-index:999">
全选复制
最后就是添加波浪效果啦

把这段代码

<!--浪开始-->

<div class="lang" style="opacity:0.68;"><div class="lang__3"></div><div class="lang__4"></div></div>
<!--style="opacity:0.8;"透明度-->

<!--浪完了-->
全选复制
添加到下边的这个位置(可以用Ctel+F搜索)

......添加到此处
</div>
<div id="primary-home" class="content-area fd mobile-full-width" ref="primaryHome">

如图
20200103-b956f521a1f96.png

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.h9i.cn/archives/955.html
开源的综合短网址缩短和还原网站源码程序
« 上一篇 07-14
【官方网站】香程互赞宝源码二开互赞程序
下一篇 » 07-14

发表评论

作者信息

热门文章

标签TAG

热评文章