效果如图:

代码:

首先在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;}
}
/*浪完了*/

 

---

首先是默认的没有类描述，新增换行每日诗词。（这个很好理解吧）如下图

以下几处代码均在主题根目录下的/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置顶 效果如下图

在上传分类封面图片 按钮  <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">

 

如图

 

 

原文链接:https://www.zmki.cn/5105.html

柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词

 

致谢:

河南恒盛农牧

天牧养殖设备

特迈养殖设备

河南恒泰