css3 动画 火箭,CSS3 火箭发射动画 寓意创新起航

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);

* {

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html,

body {

font-size: 16px;

height: 100%;

width: 100%;

}

body {

background: #34aadc;

}

h1,

p {

color: #fff;

font-family: "Roboto", sans-serif;

font-size: 4em;

font-weight: 900;

letter-spacing: -1px;

text-align: center;

}

h1 {

background: rgba(0, 0, 0, 0.1) url("http://ideas.techbrood.com/themes/techbrood/image/placeholder_170_128.png") no-repeat;

background-size: 100%;

background-position: 50% 50%;

border: 1px solid;

display: block;

height: auto;

margin: 1em auto 0.25em;

max-width: 25em;

padding-bottom: 0.25em;

text-indent: -9999px;

width: 100%;

}

@media (max-width: 500px) {

h1 {

margin: 0.25em auto;

}

}

@media (max-height: 500px) {

h1 {

margin: 0.25em auto;

}

}

p {

font-size: 2em;

font-weight: 100;

}

.bg {

background-image: -webkit-linear-gradient(315deg, rgba(52, 170, 220, 0.9) 0%, rgba(83, 109, 254, 0.9) 100%), url("https://farm8.staticflickr.com/7337/10007365255_6d0acb9c58_z.jpg");

background-image: linear-gradient(135deg, rgba(52, 170, 220, 0.9) 0%, rgba(83, 109, 254, 0.9) 100%), url("https://farm8.staticflickr.com/7337/10007365255_6d0acb9c58_z.jpg");

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

width: 100%;

height: 100%;

position: fixed;

z-index: -1;

}

.sceneWrap {

display: block;

height: 100%;

margin: 0 auto;

max-width: 400px;

max-height: 575px;

padding-top: 2em;

width: 100%;

position: relative;

}

@media (max-width: 500px) {

.sceneWrap {

max-height: 350px;

}

}

.jet-pack {

display: block;

font-size: 1rem;

left: 50%;

position: absolute;

text-align: center;

top: 70%;

-webkit-transform: translate(-50%, -50%) rotateZ(5deg);

transform: translate(-50%, -50%) rotateZ(5deg);

}

@media (max-width: 500px) {

.jet-pack {

font-size: 0.75rem;

}

}

@media (max-height: 387px) {

.jet-pack {

-webkit-transform: translate(-50%, 0%) rotateZ(5deg);

transform: translate(-50%, 0%) rotateZ(5deg);

}

}

.jet-pack:before {

background: #fff;

content: '';

display: inline-block;

height: 2.25em;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translate(-50%, 25%);

-ms-transform: translate(-50%, 25%);

transform: translate(-50%, 25%);

width: 6em;

}

.jet-pack:after {

background-image: -webkit-linear-gradient(#4380d7 0%, rgba(67, 128, 215, 0.9) 50%, rgba(83, 109, 254, 0) 100%);

background-image: linear-gradient(#4380d7 0%, rgba(67, 128, 215, 0.9) 50%, rgba(83, 109, 254, 0) 100%);

border-radius: 15%;

content: '';

display: inline-block;

height: 8em;

left: 50%;

position: absolute;

top: 50%;

-webkit-transform: translate(-50%, 20%);

-ms-transform: translate(-50%, 20%);

transform: translate(-50%, 20%);

width: 5.65em;

}

@media (max-width: 500px) {

.jet-pack:after {

background: #4289d5;

}

}

.jet-body {

background: #fff;

border-top-right-radius: 60% 50%;

border-top-left-radius: 60% 50%;

border-bottom-left-radius: 60% 50%;

border-bottom-right-radius: 60% 50%;

display: inline-block;

height: 8.5em;

position: relative;

width: 3.25em;

z-index: 3;

}

.jet-body:after {

border-left: 0.65em solid transparent;

border-right: 0.65em solid transparent;

border-top: 1.75em solid #acc7ed;

content: "";

display: inline-block;

height: 0.5em;

left: 50%;

position: absolute;

top: 9em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

z-index: 6;

-webkit-animation: flame-animation 0.2s linear infinite;

animation: flame-animation 0.2s linear infinite;

}

.jet-body:before {

border-left: 0.5em solid transparent;

border-right: 0.5em solid transparent;

border-bottom: 1.1em solid #fff;

content: "";

display: inline-block;

left: 50%;

position: absolute;

top: 8em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 0.2em;

z-index: 10;

}

.jet-wing-top-circle {

background: #4380d7;

border-radius: 50%;

box-shadow: inset -0.14em -0.2em 0.25em rgba(255, 255, 255, 0.24), inset -0.4em -0.2em 0.25em rgba(255, 255, 255, 0.4), inset -0.4em -0.2em 1em rgba(52, 170, 220, 0.5);

display: block;

height: 1.7em;

left: 50%;

position: absolute;

top: 2.5em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 1.7em;

}

.jet-wing-top-circle:before,

.jet-wing-top-circle:after {

border-bottom: 0.3em solid transparent;

border-top: 1.5em solid transparent;

border-right: 1.8em solid #fff;

content: "";

height: 0;

left: -1.9em;

position: absolute;

top: 0.9em;

-webkit-transform: rotate(-8deg);

-ms-transform: rotate(-8deg);

transform: rotate(-8deg);

width: 0;

}

.jet-wing-top-circle:after {

border-bottom: 0.3em solid transparent;

border-top: 1.5em solid transparent;

border-left: 1.8em solid #fff;

border-right: 0;

left: auto;

right: -1.9em;

-webkit-transform: rotate(8deg);

-ms-transform: rotate(8deg);

transform: rotate(8deg);

}

.smoke {

background: #fff;

border-left: 1px solid #75c5e7;

border-right: 1px solid #75c5e7;

bottom: -75%;

height: 6em;

left: 50%;

position: absolute;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 1em;

z-index: 2;

}

.smoke:before,

.smoke:after {

background: #fff;

border-left: 1px solid rgba(52, 170, 220, 0.05);

border-right: 1px solid rgba(52, 170, 220, 0.02);

content: '';

height: 6em;

left: 50%;

position: absolute;

width: 0.2em;

}

.smoke:after {

left: auto;

right: 50%;

}

.smoke-bubble,

.smoke-bubble:before,

.smoke-bubble:after {

background: #fff;

border-radius: 50%;

bottom: -1em;

display: block;

height: 3em;

left: -1em;

position: absolute;

width: 3em;

-webkit-animation: smoke-animation 0.3s linear infinite alternate-reverse;

animation: smoke-animation 0.3s linear infinite alternate-reverse;

}

.smoke-bubble:after {

bottom: -0.25em;

content: '';

height: 2.5em;

width: 2.5em;

-webkit-animation-delay: 0.1s;

animation-delay: 0.1s;

}

.smoke-bubble:before {

bottom: -0.25em;

content: '';

height: 2.15em;

left: auto;

right: -0.5em;

width: 2.15em;

-webkit-animation-delay: 0.5s;

animation-delay: 0.5s;

}

.needle {

border-left: 0.5em solid transparent;

border-right: 0.5em solid transparent;

border-bottom: 3.1em solid #fff;

height: 0;

left: 50%;

position: absolute;

top: -10.25em;

-webkit-transform: translate(-50%, 0);

-ms-transform: translate(-50%, 0);

transform: translate(-50%, 0);

width: 0;

z-index: -1;

}

.needle:after {

border: 1px solid rgba(255, 255, 255, 0.3);

border-radius: 50%;

box-shadow: inset 0 -0.0625em -0.125em #fff, inset 0 -0.9375em 0.3125em rgba(255, 255, 255, 0.9), inset 0 -1.25em 0.625em rgba(52, 170, 220, 0.5);

content: "";

height: 14em;

left: 50%;

position: absolute;

top: 100%;

-webkit-transform: translate(-50%, 28%);

-ms-transform: translate(-50%, 28%);

transform: translate(-50%, 28%);

width: 14em;

-webkit-animation: up-down-animation 0.15s linear infinite alternate-reverse;

animation: up-down-animation 0.15s linear infinite alternate-reverse;

}

.flag {

background: rgba(255, 255, 255, 0.9);

border-radius: 50%;

height: 2em;

left: -0.05em;

position: absolute;

top: 5em;

-webkit-transform: rotateZ(-25deg);

transform: rotateZ(-25deg);

width: 2em;

-webkit-animation: round-animation 2s linear infinite alternate-reverse;

animation: round-animation 2s linear infinite alternate-reverse;

}

.flag:before,

.flag:after {

background: rgba(255, 255, 255, 0.9);

border-radius: 50%;

content: "";

height: 1.5em;

position: absolute;

right: 2em;

top: -0.5em;

width: 1.5em;

}

.flag:after {

right: 0;

top: -0.5em;

}

@-webkit-keyframes load-animation {

0% {

opacity: 0;

-webkit-transform: scale(0.75, 0.75);

transform: scale(0.75, 0.75);

}

100% {

opacity: 1;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes load-animation {

0% {

opacity: 0;

-ms-transform: scale(0.75, 0.75);

-webkit-transform: scale(0.75, 0.75);

transform: scale(0.75, 0.75);

}

100% {

opacity: 1;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes flame-animation {

100% {

border-top-width: 1.9em;

border-left-width: 0.5em;

border-left-width: 0.5em;

}

}

@keyframes flame-animation {

100% {

border-top-width: 1.9em;

border-left-width: 0.5em;

border-left-width: 0.5em;

}

}

@-webkit-keyframes smoke-animation {

0% {

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes smoke-animation {

0% {

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes round-animation {

0% {

left: 1em;

opacity: 0;

top: 5em;

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

25% {

left: -0.5em;

opacity: 1;

top: 5em;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

left: 1em;

opacity: 0;

top: 5em;

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

left: -0.5;

opacity: 1;

top: 5em;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@keyframes round-animation {

0% {

left: 1em;

opacity: 0;

top: 5em;

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

25% {

left: -0.5em;

opacity: 1;

top: 5em;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

75% {

left: 1em;

opacity: 0;

top: 5em;

-ms-transform: scale(0.95, 0.95);

-webkit-transform: scale(0.95, 0.95);

transform: scale(0.95, 0.95);

}

100% {

left: -0.5;

opacity: 1;

top: 5em;

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

}

}

@-webkit-keyframes up-down-animation {

0% {

box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.95), inset 0 -15px 5px rgba(255, 255, 255, 0.9), inset 0 -20px 10px rgba(52, 170, 220, 0.5);

}

100% {

box-shadow: inset 0 -1px 2px #fff, inset 0 -17px 5px rgba(255, 255, 255, 0.95), inset 0 -22px 12px rgba(52, 170, 220, 0.6);

}

}

@keyframes up-down-animation {

0% {

box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.95), inset 0 -15px 5px rgba(255, 255, 255, 0.9), inset 0 -20px 10px rgba(52, 170, 220, 0.5);

}

100% {

box-shadow: inset 0 -1px 2px #fff, inset 0 -17px 5px rgba(255, 255, 255, 0.95), inset 0 -22px 12px rgba(52, 170, 220, 0.6);

}

}