Riprov2主题美化包|HUAN子主题:分类栏目和网站底部增加波浪效果

本教程仅用于RiproV2主题及其子主题HUAN美化包,不保证其他网站及主题可以完美适配。

今天对Riprov2主题子主题HUAN美化包新增了分类栏目及全站底部波浪滚动效果。

效果如图:

Riprov2主题美化包|HUAN子主题:分类栏目和网站底部增加波浪效果-1

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>

好了,全部添加后,把波浪图片的链接改成自己存放波浪图片的位置即可。

发表评论

后才能评论