css摇曳的_纯CSS实现的日落水面光影摇曳动画特效

CSS

语言：

CSSSCSS

确定

body {

background: #000;

height: 100vh;

overflow: hidden;

}

#ui {

position: absolute;

top: 50%;

left: 50%;

width: 500px;

height: 500px;

margin: -250px 0 0 -250px;

}

#ui .sun {

position: absolute;

top: 50%;

left: 50%;

width: 300px;

height: 150px;

margin: -150px 0 0 -150px;

border-radius: 300px 300px 0 0;

background: red;

z-index: 999;

box-shadow: 0 0 100px rgba(255, 0, 0, 0.5);

}

#ui .sea {

position: absolute;

top: 50%;

left: 50%;

width: 500px;

height: 500px;

margin: -250px 0 0 -250px;

background: #000;

filter: blur(10px) contrast(30);

}

#ui .sea .wave {

position: absolute;

top: 50%;

left: 50%;

width: 340px;

height: 40px;

margin: -20px 0 0 -170px;

background: red;

border-radius: 100%;

}

#ui .sea .wave:nth-child(2) {

animation: wave 2000ms infinite linear 500ms;

}

#ui .sea .wave:nth-child(3) {

animation: wave 2000ms infinite linear 1000ms;

}

#ui .sea .wave:nth-child(4) {

animation: wave 2000ms infinite linear 1500ms;

}

#ui .sea .wave:nth-child(5) {

animation: wave 2000ms infinite linear 1500ms;

}

#ui .sea .wave:nth-child(6) {

animation: wave 2000ms infinite linear 2000ms;

}

@keyframes wave {

0% {

transform: translateY(0) sclae(1) rotateZ(0);

}

50% {

transform: translateY(80px) scale(0.5) rotateZ(5deg);

}

100% {

transform: translateY(120px) scale(0) rotateZ(-40deg);

}

}