html+css3制作飞舞的火箭动画

1、新建html文档。

3、书写公用css代码。* { margin: 0; padding: 0; list-style: none; }#animation { animation: flig茑霁酌绡ht 3s ease-in-out 0s infinite alternate none; -webkit-animation: flight 3s ease-in-out 0s infinite alternate none; width: 50%; float: right; height: 100%; z-index: 100; margin-top: 300px; margin-right: 400px; }.spaceship { position: absolute; -webkit-transform: scale(0.76) rotate(45deg); -moz-transform: scale(0.76) rotate(45deg); -ms-transform: scale(0.76) rotate(45deg); -o-transform: scale(0.76) rotate(45deg); transform: scale(0.76) rotate(45deg); top: 20%; left: 65% }.spaceship .body { width: 300px; height: 300px; margin-top: -150px; margin-left: -150px; border-radius: 300px; position: absolute; box-shadow: -33px -33px 0 rgba(228, 230, 234, .6) inset; background-color: rgba(235, 236, 240, 1); -webkit-transform: scale(0.46, 1); -moz-transform: scale(0.46, 1); -ms-transform: scale(0.46, 1); -o-transform: scale(0.46, 1); transform: scale(0.46, 1); overflow: hidden }.spaceship .body:before { content: ""; position: absolute; width: 100%; height: 285px; background-color: rgba(255, 153, 145, 1); border-radius: 300px; -webkit-transform: scale(0.9, .46); -moz-transform: scale(0.9, .46); -ms-transform: scale(0.9, .46); -o-transform: scale(0.9, .46); transform: scale(0.9, .46); margin-top: -180px }.spaceship .window { width: 40px; height: 40px; margin-top: -40px; margin-left: -26px; border: 6px solid rgba(215, 216, 220, 1); background-color: rgba(245, 246, 255, 1); overflow: hidden; position: absolute; border-radius: 40px }.spaceship .window:before, .spaceship .window:after { width: 5px; height: 60px; position: absolute; content: ""; margin-left: 16px; margin-top: -5px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background-color: #fff; opacity: .5 }.spaceship .window:before { margin-top: 10px }.spaceship .fins { position: absolute; margin-top: -60px; z-index: -1 }.spaceship .fins:before, .spaceship .fins:after { content: ""; position: absolute; border-color: rgba(255, 153, 145, 1); height: 30px; border-top: 140px solid transparent; border-bottom: 20px solid transparent }.spaceship .fins:before { border-right: 100px solid rgba(255, 153, 145, 1); margin-left: -100px }.spaceship .fins:after { border-left: 100px solid rgba(255, 153, 145, 1) }.spaceship .antenna { position: absolute; background-color: rgba(235, 236, 240, 1); margin-top: -200px; margin-left: -2px; top: 50%; left: 50%; width: 4px; height: 60px }

5、代码整体结构。