本文介绍了如何使用CSS3实现波浪纹路效果，通过创建多个带有不同颜色和动画速度的波浪形状，叠加在背景上，形成动态的波浪分隔线。示例代码中包含关键的CSS样式，如`linear-gradient`用于创建颜色过渡，`border-radius`用于生成圆形波浪，以及`@keyframes`定义动画效果。
CSS
语言：
CSSSCSS
确定
html {
height: 100vh;
}
body {
height: inherit;
background: #2e576b;
display: -ms-grid;
display: grid;
}
.container {
margin: auto;
}
.card {
position: relative;
width: 300px;
height: 350px;
background: #fff;
border-radius: 2px;
box-shadow: 0 2px 15px 3px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.card::after {
content: '';
display: block;
width: 100%;
height: 100%;
background: -webkit-linear-gradient(top, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));
background: linear-gradient(to bottom, #0065a8, rgba(221, 238, 255, 0.4) 46%, rgba(255, 255, 255, 0.5));
}
.wave {
position: absolute;
top: 3%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
background: #0af;
border-radius: 40%;
opacity: .4;
-webkit-animation: shift 3s infinite linear;
animation: shift 3s infinite linear;
}
.wave.w2 {
background: yellow;
opacity: .1;
-webkit-animation: shift 7s infinite linear;
animation: shift 7s infinite linear;
}
.wave.w3 {
-webkit-animation: shift 5s infinite linear;
animation: shift 5s infinite linear;
background: crimson;
opacity: 0.1;
}
@keyframes shift {
from {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
扫一扫
4301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
