<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS火箭飞行动画</title>
<style>
@-webkit-keyframes reflection {
0% {
box-shadow: inset 52px 8px 60px -25px #fad000, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
100% {
box-shadow: inset 62px 8px 50px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
}
@keyframes reflection {
0% {
box-shadow: inset 52px 8px 60px -25px #fad000, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
100% {
box-shadow: inset 62px 8px 50px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
}
@-webkit-keyframes float {
0% {
-webkit-transform: translate(0px, 0px) rotate(-5deg);
transform: translate(0px, 0px) rotate(-5deg);
}
100% {
-webkit-transform: translate(10px, 100px) rotate(5deg);
transform: translate(10px, 100px) rotate(5deg);
}
}
@keyframes float {
0% {
-webkit-transform: translate(0px, 0px) rotate(-5deg);
transform: translate(0px, 0px) rotate(-5deg);
}
100% {
-webkit-transform: translate(10px, 100px) rotate(5deg);
transform: translate(10px, 100px) rotate(5deg);
}
}
@-webkit-keyframes fire {
0% {
box-shadow: inset 6px 0px 7px 0px #e4ae69;
}
100% {
box-shadow: inset 12px 0px 7px -4px #fff;
}
}
@keyframes fire {
0% {
box-shadow: inset 6px 0px 7px 0px #e4ae69;
}
100% {
box-shadow: inset 12px 0px 7px -4px #fff;
}
}
@-webkit-keyframes stars {
0% {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
100% {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
}
}
@keyframes stars {
0% {
-webkit-transform: translateX(100vw);
transform: translateX(100vw);
}
100% {
-webkit-transform: translateX(-100vw);
transform: translateX(-100vw);
}
}
@-webkit-keyframes flicker {
0% {
-webkit-transform: rotate(40deg) translate(10px, -10px);
transform: rotate(40deg) translate(10px, -10px);
opacity: 0.7;
}
20% {
-webkit-transform: rotate(35deg) translate(20px, -20px);
transform: rotate(35deg) translate(20px, -20px);
opacity: 1;
}
40% {
-webkit-transform: rotate(45deg) translate(15px, -15px);
transform: rotate(45deg) translate(15px, -15px);
opacity: 0.7;
}
60% {
-webkit-transform: rotate(35deg) scale(1.02) translate(10px, -10px);
transform: rotate(35deg) scale(1.02) translate(10px, -10px);
opacity: 1;
}
80% {
-webkit-transform: rotate(45deg) scale(0.9) translate(5px, -5px);
transform: rotate(45deg) scale(0.9) translate(5px, -5px);
opacity: 0.7;
}
100% {
-webkit-transform: rotate(40deg) translate(0px, 0px);
transform: rotate(40deg) translate(0px, 0px);
opacity: 1;
}
}
@keyframes flicker {
0% {
-webkit-transform: rotate(40deg) translate(10px, -10px);
transform: rotate(40deg) translate(10px, -10px);
opacity: 0.7;
}
20% {
-webkit-transform: rotate(35deg) translate(20px, -20px);
transform: rotate(35deg) translate(20px, -20px);
opacity: 1;
}
40% {
-webkit-transform: rotate(45deg) translate(15px, -15px);
transform: rotate(45deg) translate(15px, -15px);
opacity: 0.7;
}
60% {
-webkit-transform: rotate(35deg) scale(1.02) translate(10px, -10px);
transform: rotate(35deg) scale(1.02) translate(10px, -10px);
opacity: 1;
}
80% {
-webkit-transform: rotate(45deg) scale(0.9) translate(5px, -5px);
transform: rotate(45deg) scale(0.9) translate(5px, -5px);
opacity: 0.7;
}
100% {
-webkit-transform: rotate(40deg) translate(0px, 0px);
transform: rotate(40deg) translate(0px, 0px);
opacity: 1;
}
}
body {
background-color: #050b12;
background-image: -webkit-linear-gradient(bottom, #050b12, #15304e);
background-image: -webkit-linear-gradient(bottom, #050b12, #15304e);
background-image: linear-gradient(to top, #050b12, #15304e);
background-size: 100%;
height: 100vh;
}
.rocket {
height: 200px;
width: 400px;
-webkit-animation: float 3.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: float 3.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
position: relative;
margin: 0 auto;
-webkit-transform-origin: left;
transform-origin: left;
z-index: 10;
}
.rocket__windows {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
list-style: none;
z-index: 60;
left: 169px;
top: 29px;
}
.rocket__windows li {
height: 10px;
width: 10px;
background: #3f76a0;
border-radius: 50%;
border: 4px solid #d2d2d2;
margin: 10px 0;
box-shadow: 0px -8px 15px -1px rgba(0, 0, 0, 0.8), inset 0px -4px 3px -1px rgba(0, 0, 0, 0.8);
}
.rocket__windows li:first-child {
-webkit-transform: scale(1.4) translateY(-10px);
transform: scale(1.4) translateY(-10px);
}
.rocket__body {
-webkit-animation: reflection 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
animation: reflection 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
height: 50px;
width: 140px;
background: red;
border-radius: 50% 20px 20px 50%;
position: absolute;
top: 100px;
left: 90px;
z-index: 20;
border-right: 5px solid #9f9f9f;
box-shadow: inset 52px 8px 60px -25px yellow, inset 13px -6px 22px 2px rgba(0, 0, 0, 0.6);
}
.rocket__nose {
-webkit-transform: scale(0.9, 0.5);
transform: scale(0.9, 0.5);
height: 50px;
width: 100px;
background: #c5c5c5;
border-radius: 10px 50% 50% 10px;
position: absolute;
top: 100px;
left: 210px;
z-index: 10;
box-shadow: inset -9px -2px 22px 2px rgba(0, 0, 0, 0.6);
z-index: 10;
}
.rocket__nose:after {
height: 5px;
width: 50px;
content: '';
background: #6c6c6c;
position: absolute;
left: 98px;
top: 23px;
border-radius: 10% 50% 50% 10%;
}
.rocket__nose:before {
-webkit-transform: scale(1.1, 2);
transform: scale(1.1, 2);
height: 50px;
width: 100px;
content: '';
background: #e60000;
border-radius: 10px 50% 50% 10px;
position: absolute;
top: 0px;
left: -20px;
z-index: 10;
box-shadow: inset -9px -2px 22px 2px rgba(0, 0, 0, 0.6);
}
.rocket__front-fin {
list-style: none;
}
.rocket__front-fin li {
border-width: 0px 190px 80px 0px;
top: 86px;
left: 10px;
z-index: 360;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent #e60000 transparent;
position: absolute;
}
.rocket__front-fin li:nth-of-type(1) {
-webkit-transform: scale(0.3, 0.15) rotate(157deg);
transform: scale(0.3, 0.15) rotate(157deg);
}
.rocket__front-fin li:nth-of-type(2) {
-webkit-transform: scale(0.3, -0.15) rotate(157deg);
transform: scale(0.3, -0.15) rotate(157deg);
}
.rocket__fins li {
list-style: none;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 50px 0;
border-color: transparent transparent #e60000 transparent;
position: absolute;
}
.rocket__fins li:nth-of-type(1) {
-webkit-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
