css 实现随风摆动

无标题文档
@-webkit-keyframes open {
0% {
-webkit-transform: rotateX(-120deg);
}

25% {
-webkit-transform: rotateX(25deg);
}

50% {
-webkit-transform: rotateX(-15deg);
}

75% {
-webkit-transform: rotateX(10deg);
box-shadow: inset 0 0 0 0 #ccc;
}

100% {
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes clos {
0% {
-webkit-transform: rotateX(0deg);
}

100% {
-webkit-transform: rotateX(-120deg);
}
}
.wrap { width: 240px; position: relative; -webkit-perspective: 800px; margin: 0 auto }
.wrap h3 { margin: 0; height: 40px; background: rgba(255, 102, 0, 1); color: rgba(255, 255, 255, 1); line-height: 40px; text-align: center; font-size: 16px; position: relative; z-index: 10 }
.wrap div { position: absolute; top: 30px; left: 0; -webkit-transform-style: preserve-3d; width: 100%; -webkit-transform-origin: top; -webkit-transform: rotateX(-120deg); z-index: 1 }
.wrap>div:nth-of-type(0n+1) { top: 40px }
.wrap span { display: block; height: 28px; background: rgba(127, 255, 212, 1); color: rgba(255, 255, 255, 1); font: 14px / 28px "宋体"; text-indent: 20px; box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1); transition: 1s }
.wrap .open { -webkit-transform: rotateX(0deg); -webkit-animation: 5s open ease-in-out }
.wrap .open>span { box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0) }
.wrap .clos { -webkit-transform: rotateX(-120deg); -webkit-animation: 0.7s clos ease-in-out }
.wrap .clos>span { box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1) }
#btn { position: absolute; left: 0; top: 0; width: 100px; height: 30px; transition: 1s }

这是标题

选项1

选项2

选项3

选项4

选项5

选项6

选项7

选项8