CSS

語(yǔ)言：

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

}

}

總結(jié)

以上是生活随笔為你收集整理的css3波浪纹路_使用CSS3实现的波浪分隔线的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。