最新公告
  • 欢迎您光临更好小站,本站频繁遭到攻击,如无法访问请晚点或次日访问,感谢!立即加入我们
  • WordPress ripro主题底部波浪特效代码 暂无演示
    WordPress ripro主题底部波浪特效代码手机扫码预览

    WordPress ripro主题底部波浪特效代码

    售价:
    ¥ 免费
    • 普通用户购买价格 : 0钻石
    • 免费咨询
    • 免费安装指导
    • 付费远程安装
    • 免费寻找资源
    • QQ保障售后服务
    • 安装问题应急服务

    升级尊贵会员
    享受全站VIP待遇

    399+
    会员已经加入
  • 文章介绍
  • 评价建议
  • 声明:“付费源码经本站测试后发布,下载即用;相对于别的资源站,搬运但不测试, 付费购买又不能用!不是浪费大家时间?欢迎大家支持我们!签到投稿即可获得积分下载!“

    废话不多说了更新一些目前很火的ripro美化教程。

    首先,找到ripro根目录下footer.php文件 ,在最下面的</body></html>前面添加如下代码

    <div class="waveHorizontals mobile-hide">
      <div id="waveHorizontal1" class="waveHorizontal"></div>
      <div id="waveHorizontal2" class="waveHorizontal"></div>
      <div id="waveHorizontal3" class="waveHorizontal"></div>
    </div>

    第二步:主题目录ripro -> assets -> css -> diy.css 添加如下样式

    .waveHorizontals {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      background-color:#fff !important
    }
    .ripro-dark .waveHorizontals {
        width: 100%;
        height: 20px;
        position: relative;
        overflow: hidden;
        z-index: 1;
      background-color:#181616 !important
    }
    #waveHorizontal1 {
        -webkit-mask: url(../images/wzzti_1.svg);
        mask: url(../images/wzzti_1.svg);
        animation-delay: -2s;
        animation-duration: 12s;
    }
    #waveHorizontal1, #waveHorizontal2, #waveHorizontal3 {
        background-image: linear-gradient(20deg,#f84270 0,#fe803b 100%)!important;
    }
    .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(../images/wzzti_2.svg);
        mask: url(../images/wzzti_2.svg);
        animation-delay: -2s;
        animation-duration: 5s;
    }
    #waveHorizontal3 {
        -webkit-mask: url(../images/wzzti_3.svg);
        mask: url(../images/wzzti_3.svg);
        animation-delay: -1s;
        animation-duration: 3s;
    }
    第三步:下载附件上传至ripro目录ripro -> assets -> images
    1.

    本站坚持“不能用的源码发出去都是浪费大家时间“,付费源码都是亲测的


    源码已测试,但不保证完美无bug


    3.更好小站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,请练习客服予以删除。

    更好小站 » WordPress ripro主题底部波浪特效代码

    发表评论