WordPress主题美化-OneNav 主题底部添加动态波浪样式

找到OneNav 主题根目录下footer.php文件

在最下面的</body></html>前面添加如下代码


<span class="token tag"><span class="token punctuation"><span class="tag"><</span></span><span class="tag">div</span> <span class="token attr-name"><span class="atn">class</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontals mobile-hide</span><span class="token punctuation"><span class="atv">"</span></span></span><span class="token punctuation"><span class="tag">></span></span></span>
  <span class="token tag"><span class="token punctuation"><span class="tag"><</span></span><span class="tag">div</span> <span class="token attr-name"><span class="atn">id</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal1</span><span class="token punctuation"><span class="atv">"</span></span></span> <span class="token attr-name"><span class="atn">class</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal</span><span class="token punctuation"><span class="atv">"</span></span></span><span class="token punctuation"><span class="tag">></span></span></span><span class="token tag"><span class="token punctuation"><span class="tag"></</span></span><span class="tag">div</span><span class="token punctuation"><span class="tag">></span></span></span>
  <span class="token tag"><span class="token punctuation"><span class="tag"><</span></span><span class="tag">div</span> <span class="token attr-name"><span class="atn">id</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal2</span><span class="token punctuation"><span class="atv">"</span></span></span> <span class="token attr-name"><span class="atn">class</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal</span><span class="token punctuation"><span class="atv">"</span></span></span><span class="token punctuation"><span class="tag">></span></span></span><span class="token tag"><span class="token punctuation"><span class="tag"></</span></span><span class="tag">div</span><span class="token punctuation"><span class="tag">></span></span></span>
  <span class="token tag"><span class="token punctuation"><span class="tag"><</span></span><span class="tag">div</span> <span class="token attr-name"><span class="atn">id</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal3</span><span class="token punctuation"><span class="atv">"</span></span></span> <span class="token attr-name"><span class="atn">class</span></span><span class="token attr-value"><span class="token punctuation"><span class="pun">=</span></span><span class="token punctuation"><span class="atv">"</span></span><span class="atv">waveHorizontal</span><span class="token punctuation"><span class="atv">"</span></span></span><span class="token punctuation"><span class="tag">></span></span></span><span class="token tag"><span class="token punctuation"><span class="tag"></</span></span><span class="tag">div</span><span class="token punctuation"><span class="tag">></span></span></span>
<span class="token tag"><span class="token punctuation"><span class="tag"></</span></span><span class="tag">div</span><span class="token punctuation"><span class="tag">></span></span></span>
generic
3.82 KB
© 爱导航
<div class="waveHorizontals mobile-hide">
  <div id="waveHorizontal1" class="waveHorizontal"></div>
  <div id="waveHorizontal2" class="waveHorizontal"></div>
  <div id="waveHorizontal3" class="waveHorizontal"></div>
</div>

第二步：RiPlus主题/RiPro主题目录-> assets -> css -> diy.css 添加下方样式

.waveHorizontals {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
z-index: 1;
background-color:#25282a !important
}/*background-color:#25282a 背景底色，根据自己的美化选择颜色*/
.ripro-dark .waveHorizontals {
width: 100%;
height: 20px;
position: relative;
overflow: hidden;
z-index: 1;
background-color:#181616 !important
}
#waveHorizontal1 {
-webkit-mask: url(https://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_001.svg);
mask: url(https://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_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://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_002.svg);
mask: url(https://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_002.svg);
animation-delay: -2s;
animation-duration: 5s;
}
#waveHorizontal3 {
-webkit-mask: url(https://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_003.svg);
mask: url(https://www.mophp.cn/www.mophp.cn/wp-content/themes/riplus-child/assets/images/mophp_003.svg);
animation-delay: -1s;
animation-duration: 3s;
}