RIpro主题底部波浪

好多人在问底部波浪怎么弄的 ,本文为底部波浪教程+源文件

RIpro主题底部波浪插图

教程开始:

1、首先找到ripro根目录下footer.php文件 并把附件中 footer.php的内容粘贴在最下面的</body></html>前。

2、找到ripro/assets/css目录下的diy.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;
}

 

郑重声明:帖子标题写有 【亲测】即能正常运行,帖子标题有 【原版】字样即原始版本自带有加密文件版本 限于标题长度字数限制问题,部分资源未注明开源情况均为原版文件(原版文件未做解密处理,但不影响使用)爱集码不会自己加密代码文件,源码仅供研究学习之用,请勿用于商业运营,商业运营请支持作者,购买正版,谢谢 特别提醒:本站所有下载资源均不包含技术支持和安装服务! 如需技术支持联系客服有偿解决,终身会员视情况而定,一般小问题免费解决。 重要提示:本站对于 Safari浏览器兼容不好,如出现下载按钮消失请换360或者QQ等第三方浏览器访问或下载。 免责申明:本站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。
资源猫 » RIpro主题底部波浪

提供最优质的资源集合

资源猫 立即查看