怎么用HTML5和CSS3炫酷火箭升空動(dòng)畫特效

這篇文章主要講解了“怎么用HTML5和CSS3炫酷火箭升空動(dòng)畫特效”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用HTML5和CSS3炫酷火箭升空動(dòng)畫特效”吧！

　　HTML結(jié)構(gòu)

　　CSS樣式

　　body {

　　background-color: #1f2740;

　　text-align: center;

　　margin: 20px auto;

　　}

　　svg {

　　margin: 20px 20px 10px;

　　width: 300px;

　　}

　　a {

　　color: #f8f3dc;

　　font-family: monospace;

　　}

　　#approved {

　　clip-path: circle(at center);

　　border: 4px solid #f8f3dc;

　　border-radius: 50%;

　　animation: rocketShake .1s linear alternate infinite;

　　}

　　#approved .st0 {

　　fill: #13192d;

　　}

　　#approved .st1, #approved .st3 {

　　fill: #f8f3dc;

　　}

　　#approved .st3 {

　　stroke: #13192d;

　　stroke-width: 4;

　　stroke-miterlimit: 10;

　　}

　　#approved .st4 {

　　fill: #69b3b2;

　　}

　　#approved .rocket {

　　animation: rocketMove 5s linear alternate infinite;

　　}

　　#approved .st1 {

　　transform: translateY(-100%);

　　animation: starsMove 6s infinite;

　　}

　　#approved .st1:nth-of-type(5) {

　　animation-delay: 3.5s;

　　animation-duration: 8s;

　　}

　　#approved .st1:nth-of-type(4) {

　　animation-delay: 2s;

　　animation-duration: 3s;

　　}

　　#approved .st1:nth-of-type(3) {

　　animation-delay: .2s;

　　animation-duration: 6s;

　　}

　　#approved .st1:nth-of-type(2) {

　　animation-delay: 4s;

　　}

　　#approved .st4 {

　　transform: scale(0);

　　opacity: 0;

　　animation: smoke 2s 1s infinite;

　　transform-origin: center;

　　transform-box: fill-box;

　　}

　　#approved .st4:nth-child(9) {

　　animation-delay: .8s;

　　animation-duration: 1.5s;

　　}

　　@keyframes starsMove {

　　to {

　　transform: translateY(100%);

　　}

　　}

　　@keyframes smoke {

　　30% {

　　transform: scale(2);

　　opacity: 1;

　　}

　　31% {

　　opacity: 0.5;

　　}

　　}

　　@keyframes rocketShake {

　　from {

　　transform: rotate(-0.5deg);

　　}

　　to {

　　transform: rotate(0.5deg);

　　}

　　}

　　@keyframes rocketMove {

　　50% {

　　transform: translateY(-15%);

　　}

　　70% {

　　transform: translateY(0);

　　}

　　80% {

　　transform: translateY(2%);

　　}

　　}

感謝各位的閱讀，以上就是“怎么用HTML5和CSS3炫酷火箭升空動(dòng)畫特效”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么用HTML5和CSS3炫酷火箭升空動(dòng)畫特效這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！