本教程适用于RiPro主题,如果是子主题也可参考此方法,子主题使用的时候注意素材路径即可,位置基本都是一样,喜欢本教程请把我们的网站添加收藏,方便下次寻找!
展示效果:

美化教程:
1.找到ripro/parts/term-bar.php(分类页添加位置),在最下面添加如下代码:
<!--增加头部波浪-->
<div class="dabolang mobile-hide">
<div id="dabolangl1" class="dabolangl"></div>
<div id="dabolangl2" class="dabolangl"></div>
<div id="dabolangl3" class="dabolangl"></div>
</div>
2.找到ripro/footer.php(底部添加位置),在“</body>”前添加如下代码:
<!--底部波浪-->
<div class="dabolang mobile-hide">
<div id="dabolangl1" class="dabolangl"></div>
<div id="dabolangl2" class="dabolangl"></div>
<div id="dabolangl3" class="dabolangl"></div>
</div>
3.找到ripro主题下的diy.css,添加css样式(注意样式中图片路径,使用的时候适当修改即可),子主题也一样,css代码如下:
/**分类页波浪**/
.waveHorizontals {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
z-index: 1;
background-color: #fff0!important;
margin-top: -19px!important;
}
.ripro-dark .waveHorizontals {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
z-index: 1;
background-color:#181616 !important
}
#waveHorizontal1 {
-webkit-mask: url(../ripro/assets/images/svg/augsc_001.svg);
mask: url(../ripro/assets/images/svg/augsc_001.svg);
animation-delay: -2s;
animation-duration: 12s;
background-color: #f6f6f6;
}
.ripro-dark #waveHorizontal1{
background-color: #f1f1f1!important;
}
.ripro-dark #waveHorizontal2{
background-color: #f1f1f1!important;
}
.ripro-dark #waveHorizontal3{
background-color: #f1f1f1!important;
}
.waveHorizontal {
width: 200%;
height: 100%;
display: block;
position: absolute;
left: 0;
bottom: 0;
background-repeat: repeat-x;
background-position: left bottom;
background-size: 350px 100%;
transform-origin: 0 100% 0;
animation-name: move;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes move{0%{transform:translate(-175px,0px) scale(1,1)}50%{transform:translate(-87px,0px) scale(1,0.5)}100%{transform:translate(0px,0px) scale(1,1)}}
#waveHorizontal2 {
-webkit-mask: url(../ripro/assets/images/svg/augsc_002.svg);
mask: url(../ripro/assets/images/svg/augsc_002.svg);
animation-delay: -2s;
animation-duration: 5s;
background-color: #f6f6f6;
}
#waveHorizontal3 {
-webkit-mask: url(../ripro/assets/images/svg/augsc_003.svg);
mask: url(../ripro/assets/images/svg/augsc_003.svg);
animation-delay: -1s;
animation-duration: 3s;
}
.filter--content {
margin-top: -60px;
}
4.下载附件将“svg文件夹”上传至“ripro//assets/images/”文件夹下,内含3个素材
公告: 本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付100+技术服务费,具体依客服说明为准,请大家谅解!
说明: 本站资源解压密码见“常见问题”,一般都为“www.360mb.net”!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
说明: 本站资源解压密码见“常见问题”,一般都为“www.360mb.net”!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。