[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 文件内修改。

把

…

  这一段换成下边的代码即可

			

			

			正在加载今日诗词....
','ziranzhi2'); ?>

		

 

---

由于波浪动画会遮挡 上传分类封面图片 按钮。我们给 上传分类封面图片 按钮用css置顶 效果如下图

在上传分类封面图片 按钮  标签里添加样式 style=”z-index:999″

添加前

 

修改后

---

最后就是添加波浪效果啦

把这段代码

	

	


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

......添加到此处

 

如图

 

 

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

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

 

致谢:

河南恒盛农牧

天牧养殖设备

特迈养殖设备

河南恒泰