HTML页尾波浪动画代码,css3波浪动画.html

Document

body {

position: relative;

align-items: center;

min-height: 100vh;

background-color: rgb(118, 218, 255);

overflow: hidden;

}

body:before, body:after {

content: "";

position: absolute;

left: 50%;

min-width: 300vw;

min-height: 300vw;

background-color: #fff;

animation-name: rotate;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

body:before {

bottom: 15vh;

border-radius: 45%;

animation-duration: 10s;

}

body:after {

bottom: 12vh;

opacity: .5;

border-radius: 47%;

animation-duration: 10s;

}

@keyframes rotate {

0% {

transform: translate(-50%, 0) rotateZ(0deg);

}

50% {

transform: translate(-50%, -2%) rotateZ(180deg);

}

100% {

transform: translate(-50%, 0%) rotateZ(360deg);

}

}

h2 {

position: relative;

color: #333;

z-index: 10;

text-align: center;

height: 100vh;

line-height: 140vh;

font-size: 8vw;

text-shadow: 3px 3px 2px #999;

}

/*============*/

.com{

width: 300px;

height: 300px;

border-radius:50%;

}

.wrap{

position: relative;

z-index: 100;

display: block;

margin: 0 auto;

overflow: hidden;

}

.wave{

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

animation-duration: 4s;

animation-name: moveUp;

animation-timing-function: linear;

animation-fill-mode:both;

}

.wave:before, .wave:after {

content: "";

position: absolute;

left: 50%;

min-width: 300%;

min-height: 300%;

/*background-color: #76daff;*/

background-color: #fff;

/*animation-name: rotate2;*/

/*animation-iteration-count: infinite;*/

animation-duration: 4s;

animation-timing-function: linear;

}

.wave:before {

bottom: 50%;

border-radius: 44%;

animation-name: rotate2;

animation-iteration-count: infinite;

}

.wave:after {

bottom: 46%;

opacity: .6;

border-radius: 43%;

animation-name: rotate3;

animation-iteration-count: infinite;

}

@keyframes moveUp {

0% {

transform: translateY(50%);

}

50% {

transform: translateY(0);

}

100% {

transform: translateY(-65%);

}

}

@keyframes rotate2 {

0% {

transform: translate(-50%, 0) rotateZ(0deg);

}

50% {

transform: translate(-50%, 0) rotateZ(180deg);

}

100% {

transform: translate(-50%, 0) rotateZ(360deg);

}

}

@keyframes rotate3 {

0% {

transform: translate(-50%, 0) rotateZ(45deg);

}

50% {

transform: translate(-50%, 0) rotateZ(225deg);

}

100% {

transform: translate(-50%, 0) rotateZ(405deg);

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史