RiProV2分类栏目波浪美化素材及教程

[ri-alerts color=”danger”]一、下载上传必要的图片素材[/ri-alerts]

附件直接下载上传到站点根目录、记住文件夹得路径后续样式标签需要修改为自己的图片路径。

[ri-alerts color=”danger”]二、添加CSS样式[/ri-alerts]

[rihide]添加路径：\ripro-v2\assets\css\app.css 打开后拉到最底部复制粘贴以下代码保存。

/*龙跃资源网栏目波浪*/
.dabolang {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #fff0 !important;
    margin-top: -19px;
}
.ripro-dark .dabolang {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  background-color:#181616 !important
}
#dabolangl1 {
    -webkit-mask: url(/wp-content/tupian/bolang/longyue_001.svg);
    mask: url(/wp-content/tupian/bolang/longyue_001.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}
#dabolangl1, #dabolangl2, #dabolangl3 {
    background-color: rgb(246,246,246)
}
.ripro-dark #dabolangl1{
    background-color: #f1f1f1!important;
}
.ripro-dark  #dabolangl2{
    background-color: #f1f1f1!important;
}
.ripro-dark  #dabolangl3{
    background-color: #f1f1f1!important;
}
.dabolangl {
    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)}}

#dabolangl2 {
    -webkit-mask: url(/wp-content/tupian/bolang/longyue_002.svg);
    mask: url(/wp-content/tupian/bolang/longyue_002.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}
#dabolangl3 {
    -webkit-mask: url(/wp-content/tupian/bolang/longyue_003.svg);
    mask: url(/wp-content/tupian/bolang/longyue_003.svg);
    animation-delay: -1s;
    animation-duration: 3s;
}
/*龙跃资源网栏目波浪*/

[/rihide]

[ri-alerts color=”danger”]三、添加栏目标签[/ri-alerts]

[rihide]添加路径：\ripro-v2\header.php打开后拉倒第30行、然后回车另起一行、粘贴以下代码保存

<!--龙跃资源网增加头部波浪开始-->
    <div class="dabolang mobile-hide">
        <div id="dabolangl1" class="dabolangl"></div>
        <div id="dabolangl2" class="dabolangl"></div>
        <div id="dabolangl3" class="dabolangl"></div>
    </div>
<!--龙跃资源网增加头部波浪结束-->

[/rihide]