js结合css3,使用JS和CSS3实现的旗帜飘扬动画

CSS

语言：

CSSSCSS

确定

body {

padding: 0px;

margin: 0px;

background-color: black;

text-align: center;

position: absolute;

top: 0px;

bottom: 0px;

left: 0px;

right: 0px;

overflow: hidden;

}

#canvas {

position: relative;

padding: 0px;

height: 320px;

width: 480px;

margin: 100px auto;

}

.flg {

position: relative;

height: 100%;

width: 6px;

margin: 0px -1px;

display: inline-block;

z-index: 1;

background-position: center 100px;

background-repeat: no-repeat;

background-attachment: fixed;

transform-style: preserve-3d;

animation: wave 1s ease-in-out infinite;

transform-origin: center center;

}

@keyframes wave {

0% {

height: 100%;

background-position-y: 100px;

transform: rotateZ(0deg) rotateX(0deg);

}

50% {

height: 98%;

background-position-y: 90px;

transform: rotateZ(5deg) rotateX(10deg);

}

100% {

height: 100%;

background-position-y: 100px;

transform: rotateZ(0deg) rotateX(0deg);

}

}

img {

display: none;

}