文章目录[隐藏]

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

展示效果:

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个素材

发表评论

后才能评论

本站部分资源需要解压密码,如需解压密码,解压密码则为“www.360mb.net”,如密码还是错误请联系客服。

本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,如需技术支持需支付技术服务费100+,请大家谅解!

对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。