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

效果如图:

代码:

首先在style.css样式表里添加波浪样式

代码语言：javascript复制

/*浪来了*/
.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>  这一段换成下边的代码即可

代码语言：javascript复制

<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"

添加前

代码语言：javascript复制

<span class="pos-a cat-button mobile-hide" v-if="isAdmin" >

修改后

代码语言：javascript复制

<span class="pos-a cat-button mobile-hide" v-if="isAdmin" style="z-index:999">

---

最后就是添加波浪效果啦

把这段代码

代码语言：javascript复制

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

添加到下边的这个位置（可以用Ctel F搜索）

代码语言：javascript复制

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

如图

css

0 人点赞