Riprov2主题美化包|HUAN子主题:分类栏目和网站底部增加波浪效果
本教程仅用于RiproV2主题及其子主题HUAN美化包,不保证其他网站及主题可以完美适配。
今天对Riprov2主题子主题HUAN美化包新增了分类栏目及全站底部波浪滚动效果。
效果如图:
RiproV2主题美化包/HUAN子主题 增加波浪滚动效果,在chind-style.css加入如下代码即可:
/*分类目录波浪*/
/*lang Style start*/
.lang {
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
margin-top: -55px;
}
.lang__1 {
background: url(../Huan/assets/images/wave_01.png) repeat-x;
width: 7000px;
height: 60px;
animation: langs 18s infinite linear;
position: absolute;
top: 8px;
}
.lang__2 {
background: url(../Huan/assets/images/wave_02.png) repeat-x;
width: 7000px;
height: 60px;
animation: langs 12s infinite linear;
position: relative;
top: 0;
}
.ripro-dark .lang__1 {
background: url(../Huan/assets/images/wave_01-1.png) repeat-x;
}
.ripro-dark .lang__2 {
background: url(../Huan/assets/images/wave_02-2.png) repeat-x;
}
@keyframes langs {
0% {margin-left: 0;}
100% {margin-left: -1938px;}
}
@-webkit-keyframes langs {
0% {margin-left: 0;}
100% {margin-left: -1938px;}
}
/*lang Style end*/
/*lang Style start*/
.filter--content {
border: 0;
padding: 20px 0;
background-color: #f6f6f6;
}
.ripro-dark .filter--content {
background-color: #232425;
}
.filter--content .form-box {
background-color: #f6f6f6;
}
.ripro-dark .filter--content .form-box {
background-color: #232425;
}
.lang {
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
margin-top: -55px
}
.lang__1 {
background: url(../Huan/assets/images/sch_b.png) repeat-x;
width: 4500px;
height: 60px;
animation: langs 18s infinite linear;
position: absolute;
top: 8px
}
.lang__2 {
height: 60px
}
.lang__3 {
background: url(../Huan/assets/images/sch_c.png) repeat-x;
width: 4500px;
height: 60px;
animation: langs 18s infinite linear;
position: absolute;
top: 0;
}
.lang__4 {
background: url(../Huan/assets/images/sch_d.png) repeat-x;
width: 4500px;
height: 60px;
animation: langs 12s infinite linear;
position: relative;
top: 0
}
.ripro-dark .lang__3 {
background: url(../Huan/assets/images/sch_e.png) repeat-x;
}
.ripro-dark .lang__4 {
background: url(../Huan/assets/images/sch_f.png) repeat-x;
}
.author .lang {
margin-top: -132px
}
@keyframes langs {
0% {
margin-left: 0
}
100% {
margin-left: -1938px
}
}
@-webkit-keyframes langs {
0% {
margin-left: 0
}
100% {
margin-left: -1938px
}
}
/*lang Style end*/
然后修改footer.php模板增加底部波浪效果:
<footer class="site-footer">
<!--增加底部波浪-->
<div class="lang"><div class="lang__1"></div><div class="lang__2"></div></div>
修改分类栏目模板term-bar.php最底部增加分类栏波浪效果:
<!--增加分类头部波浪-->
<div class="lang">
<div class="lang__3"></div>
<div class="lang__4"></div>
</div>
好了,全部添加后,把波浪图片的链接改成自己存放波浪图片的位置即可。