ripro主题首页搜索模块波纹代码

很多看了油条演示站的这个,比较喜欢,今天就抽空做了以下。

ripro主题首页搜索模块波纹代码-A8资源库

第一步:

parts文件下search.php 倒数第三个</div>前添加以下代码

<div class="awaves"> 
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto"> 
<defs> <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path> </defs> 
<g class="parallax"> 
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"></use> <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"></use> 
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"></use> 
<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"></use> 
</g> 
</svg> 
</div>

 

第二步:

添加CSS

.awaves {
background: linear-gradient(60deg, rgb(252, 185, 62) 0%, rgb(255, 111, 132) 100%);
padding-top: 320px;
z-index: -1;
position: absolute;
bottom: 0;
width: 100%;
}
.waves {
position: relative;
width: 100%;
height: 10vh;
margin-bottom: -6px;
min-height: 100px;
max-height: 150px;
}
.parallax&gt;use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax&gt;use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax&gt;use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax&gt;use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax&gt;use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}

 

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
版权声明:原创作品,未经允许不得转载,否则将追究法律责任。
本站资源有的自互联网收集整理,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
A8资源库 » ripro主题首页搜索模块波纹代码

发表评论

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者
  • 1358会员总数(位)
  • 1234资源总数(个)
  • 12本周发布(个)
  • 0 今日发布(个)
  • 880稳定运行(天)

提供最优质的资源集合

立即查看