[7b2美化]柒比贰 魔改系列|7B2-分类封面添加波浪效果&每日诗词
效果如图:
代码:
首先在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
致谢: