溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么用HTML5和CSS3炫酷火箭升空動畫特效”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“怎么用HTML5和CSS3炫酷火箭升空動畫特效”吧！
HTML結構
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炫酷火箭升空動畫特效”的內容了，經過本文的學習后，相信大家對怎么用HTML5和CSS3炫酷火箭升空動畫特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
