css动画高度变长,CSS3 用DIV高度变化构造的锯齿正弦波动画

CSS

语言：

CSSSCSS

确定

.cont {

position: relative;

height: 200px;

}

.blip {

display: inline-block;

background-color: black;

width: 10px;

position: absolute;

bottom: 0;

animation-duration: 1s;

animation-direction: alternate;

animation-timing-function: ease-in-out;

animation-fill-mode: both;

animation-iteration-count: infinite;

}

.blip:nth-child(1) {

height: 2px;

left: 10px;

animation-name: blip1;

animation-delay: 20ms;

}

@keyframes blip1 {

100% {

height: 198px;

}

}

.blip:nth-child(2) {

height: 4px;

left: 20px;

animation-name: blip2;

animation-delay: 40ms;

}

@keyframes blip2 {

100% {

height: 196px;

}

}

.blip:nth-child(3) {

height: 6px;

left: 30px;

animation-name: blip3;

animation-delay: 60ms;

}

@keyframes blip3 {

100% {

height: 194px;

}

}

.blip:nth-child(4) {

height: 8px;

left: 40px;

animation-name: blip4;

animation-delay: 80ms;

}

@keyframes blip4 {

100% {

height: 192px;

}

}

.blip:nth-child(5) {

height: 10px;

left: 50px;

animation-name: blip5;

animation-delay: 100ms;

}

@keyframes blip5 {

100% {

height: 190px;

}

}

.blip:nth-child(6) {

height: 12px;

left: 60px;

animation-name: blip6;

animation-delay: 120ms;

}

@keyframes blip6 {

100% {

height: 188px;

}

}

.blip:nth-child(7) {

height: 14px;

left: 70px;

animation-name: blip7;

animation-delay: 140ms;

}

@keyframes blip7 {

100% {

height: 186px;

}

}

.blip:nth-child(8) {

height: 16px;

left: 80px;

animation-name: blip8;

animation-delay: 160ms;

}

@keyframes blip8 {

100% {

height: 184px;

}

}

.blip:nth-child(9) {

height: 18px;

left: 90px;

animation-name: blip9;

animation-delay: 180ms;

}

@keyframes blip9 {

100% {

height: 182px;

}

}

.blip:nth-child(10) {

height: 20px;

left: 100px;

animation-name: blip10;

animation-delay: 200ms;

}

@keyframes blip10 {

100% {

height: 180px;

}

}

.blip:nth-child(11) {

height: 22px;

left: 110px;

animation-name: blip11;

animation-delay: 220ms;

}

@keyframes blip11 {

100% {

height: 178px;

}

}

.blip:nth-child(12) {

height: 24px;

left: 120px;

animation-name: blip12;

animation-delay: 240ms;

}

@keyframes blip12 {

100% {

height: 176px;

}

}

.blip:nth-child(13) {

height: 26px;

left: 130px;

animation-name: blip13;

animation-delay: 260ms;

}

@keyframes blip13 {

100% {

height: 174px;

}

}

.blip:nth-child(14) {

height: 28px;

left: 140px;

animation-name: blip14;

animation-delay: 280ms;

}

@keyframes blip14 {

100% {

height: 172px;

}

}

.blip:nth-child(15) {

height: 30px;

left: 150px;

animation-name: blip15;

animation-delay: 300ms;

}

@keyframes blip15 {

100% {

height: 170px;

}

}

.blip:nth-child(16) {

height: 32px;

left: 160px;

animation-name: blip16;

animation-delay: 320ms;

}

@keyframes blip16 {

100% {

height: 168px;

}

}

.blip:nth-child(17) {

height: 34px;

left: 170px;

animation-name: blip17;

animation-delay: 340ms;

}

@keyframes blip17 {

100% {

height: 166px;

}

}

.blip:nth-child(18) {

height: 36px;

left: 180px;

animation-name: blip18;

animation-delay: 360ms;

}

@keyframes blip18 {

100% {

height: 164px;

}

}

.blip:nth-child(19) {

height: 38px;

left: 190px;

animation-name: blip19;

animation-delay: 380m