Wordpress教程:RiPro主题美化 - RiPro主题底部波浪 暂无演示

Wordpress教程:RiPro主题美化 - RiPro主题底部波浪

售价:
¥ 免费
  • 普通用户购买价格 : 0积分
  • 免费售前咨询
  • 免费安装指导
  • 付费安装资源
  • 付费终身升级
  • QQ保障售后服务
  • 网站应急咨询顾问

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

247+
会员已经加入
  • 文章介绍
  • 评价建议
  • 好多人在问底部波浪怎么弄的 ,本文为底部波浪教程。

    首先,找到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/augsc_001.svg);
        mask: url(../images/augsc_001.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/augsc_002.svg);
        mask: url(../images/augsc_002.svg);
        animation-delay: -2s;
        animation-duration: 5s;
    }
    #waveHorizontal3 {
        -webkit-mask: url(../images/augsc_003.svg);
        mask: url(../images/augsc_003.svg);
        animation-delay: -1s;
        animation-duration: 3s;
    }

    第三步:主题目录ripro -> assets -> images,将下载的文件放入此文件夹中。

     

     

    1. 本站资源均来源于用户上传和网络整理,如有侵权,请邮件联系站长删除!

    2. 分享目的仅供大家学习和交流,请不要用于商业用途!否则,后果请用户自负。

    3. 本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除。

    4. 如果您喜欢本站发布的资源,请支持正版,购买正版可以得到更好的正版服务。如有侵权,请邮件与我们联系处理。

    5. 如遇到加密压缩包,默认解压密码为lingshan.info,如遇到无法解压的请联系管理员!


    凌山博客 » Wordpress教程:RiPro主题美化 - RiPro主题底部波浪