本文转载自:钻芒博客
https://www.zmki.cn/5105.html
效果如图:
代码:
/*浪来了*/
.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-分类封面添加波浪效果&每日诗词
致谢:
河南恒盛农牧
天牧养殖设备
特迈养殖设备
河南恒泰
