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]

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1、免责声明:本站资源均来源于互联网及网友提供、仅用于个人学习交流使用、不得用于任何商业应用、下载请在24小时之内删除。
2、版权声明:龙跃资源网分享仅限于学习研究、本站服务器不存储任何软件资源、严禁从事商业或者非法活动、版权归原作者所以。
3、标价声明:本站资源标价只是用户自愿打赏赞助非卖价,打赏费用仅维持本站的日常运营所需、打赏赞助后无法退款三思后行
4、资源赞助:资源标价即为单资源赞助本站、非会员用户自行下载研究搭建使用无技术服务!
5、赞助会员:会员用户提供简单技术支持、远程、代搭建、BUG检查修复等单独付费!
6、排忧解难:时间精力有限无法提供免费服务还望各用户相互谅解!
7、冒犯侵权:本站如果有冒犯和侵权到您的合法权益请及时邮箱联系我们:邮箱:nb.52ly@qq.com,我们会立即处理删除下架链接。
本网站采用BY-NC-SA协议进行授权转载请注明原文链接

龙跃资源网 WordPress教程 RiProV2分类栏目波浪美化素材及教程 https://zy.52ly.top/3888/

官方客服团队

为您解决烦忧 - 24小时在线 专业服务