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

作者 : 121源码 本文共1357个字,预计阅读时间需要4分钟 发布时间: 2021-07-2 共610人阅读

短视频自学


温馨提示:
本站为源代码分享站,源码多为网友投稿 我们没有对源码进行测试,不保证可用性、安全性以及版权归属。 因源码具有可复制性,一经购买 ,不得以任何形式退款。
如需商业用途 请点击商业源码栏目,购买商业源码.

第一步:

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>use {
animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax>use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax>use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax>use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax>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);
}
}

    1.本站所提供的源码模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 3310459304@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
    2.分享目的仅供大家学习和交流,请不要用于商业用途!
    3.如果你也有好源码或者教程,可以到用户中心发布投稿,分享有金币奖励和额外收入!
    4.本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
    5.如有链接无法下载、失效或广告,请联系站长,可领回失去的金币,并额外有奖!
    6.如遇到加密压缩包,默认解压密码为"www.121code.com",如遇到无法解压的请联系管理员!
    7.本站部分文章、资源来自互联网,版权归原作者及网站所有,如果侵犯了您的权利,请及时联系我站删除。


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

    常见问题FAQ

    如果我需要二次开发请问贵站可以代开发吗?
    您好,可以的,我们提供网站建设、网站开发、网页设计、小程序开发、微商城开发、系统定制开发、搜索引擎优化等项目服务。

    发表评论