⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
低调朴实的双按钮引导卡片

秋叶资源网 by Qiuye

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

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

ripro主题首页搜索模块波纹代码-秋叶资源网

效果如下:

ripro主题首页搜索模块波纹代码-秋叶资源网

第一步:

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);
}
}

 

ripro主题首页搜索模块波纹代码-秋叶资源网
ripro专题

WordPress ripro主题添加文章字数和阅读时间

2020-3-23 14:17:49

ripro专题

ripro网站幻灯片banner上小图标特效

2020-3-23 21:08:21

⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
WordPress美化 - Npcink