html图片特效波动,CSS3 波动图

CSS

语言：

CSSSCSS

确定

html {

background-color: #111;

}

.wrapper {

position: relative;

height: 100px;

width: 100%;

overflow: hidden;

}

.movingsection {

position: absolute;

-webkit-animation: slide 1s infinite linear;

animation: slide 1s infinite linear;

}

.bauble {

float: left;

margin-left: -10px;

-webkit-transform-origin: 50% 100%;

-ms-transform-origin: 50% 100%;

transform-origin: 50% 100%;

border-left: 10px solid #eee;

border-top: 10px solid #eee;

border-right: 10px solid #eee;

height: 100px;

width: 200px;

border-radius: 200px 200px 0 0;

}

.bauble.final {

-webkit-animation: rotate 1s infinite linear;

animation: rotate 1s infinite linear;

}

@-webkit-keyframes slide {

from {

margin-left: 0;

}

to {

margin-left: -210px;

}

}

@keyframes slide {

from {

margin-left: 0;

}

to {

margin-left: -210px;

}

}

@-webkit-keyframes rotate {

from {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotate {

from {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}