锦鲤小子 代码分享|RiPro主题美化RiPro主题底部波浪_WordPress教程
声明：本站源码仅做学习研究，严禁用于任何商业用途以及任何变现！
福利：注册以上任一交易所，可得本站【源码库】栏目下源码一套！
就类似于本站底部的波浪，制作方法贴一下
首先，找到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/svg/augsc_001.svg);
mask: url(../images/svg/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/svg/augsc_002.svg);
mask: url(../images/svg/augsc_002.svg);
animation-delay: -2s;
animation-duration: 5s;
}
#waveHorizontal3 {
-webkit-mask: url(../images/svg/augsc_003.svg);
mask: url(../images/svg/augsc_003.svg);
animation-delay: -1s;
animation-duration: 3s;
}
第三步：主题目录ripro -> assets -> images/svg，将下载的文件放入此文件夹中。
1. 本站所有资源或来源于用户上传或搜集于网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
锦鲤源码_源码论坛_源码社区 » 代码分享|RiPro主题美化RiPro主题底部波浪_WordPress教程
锦鲤源码_源码论坛_源码社区 » 代码分享|RiPro主题美化RiPro主题底部波浪_WordPress教程
