ripro底部波浪特效制作代码


diy文件里面的代码复制到ripro主题里面的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(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_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(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
animation-delay: -2s;
animation-duration: 5s;
}
#waveHorizontal3 {
-webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
animation-delay: -1s;
animation-duration: 3s;
}
2修改文件footer里面代码复制到ripro里面的footer.php文件里面

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!443252835@qq.com
2. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!
3. 如果你也有好源码或者教程,可以到直接会员中心发布,分享有会员购买会会有收入!可提现!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!如果连基本小程序安装不会的先买站内的小程序安装教程看完再买源码!
5. 如有链接无法下载、失效或广告,请联系管理员QQ处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
9. 如遇到加密压缩包,默认解压密码为"dghoyo.com",如遇到无法解压的请联系管理员!

动能源码站由众多网友分享:php源码,商业源码,wp主题,人人商城,破解模块,商业插件,微信小程序,小程序源码,微信小程序源码,织梦模板,微信营销源码,破解软件的工具等资源!
动能源码 » ripro底部波浪特效制作代码

发表评论

提供最优质的电商培训资源集合

立即查看 了解详情