其他代码

HTML5+CSS3炫酷火箭升空动画特效

面包多

HTML5+CSS3炫酷火箭升空动画特效-创客云
这是一款 HTML5 svg 和 CSS3 炫酷火箭升空动画特效。该特效的火箭使用 SVG 来实现,并通过 CSS3 动画来实现火箭的动画特效。

HTML 结构

  1. <svg id="approved" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650.6 650.6"><circle class="st0" cx="325.3" cy="325.3" r="323.3"/><path class="st1" d="M96.9 274.5l6.1 11.1 11.2 6.1-11.2 6.2-6.1 11.1-6.1-11.1-11.2-6.2 11.2-6.1z"/><circle class="st1" cx="141.7" cy="473.6" r="5.7"/><circle class="st1" cx="213.7" cy="143.7" r="5.7"/><circle class="st1" cx="474.3" cy="133.9" r="5.7"/><circle class="st1" cx="544.1" cy="279.8" r="5.7"/><circle class="st1" cx="510.7" cy="468" r="5.7"/><g class="rocket"><path d="M325.3 62s110.9 201.8 19.3 405l-9.6 25.7h-19.3l-9.6-25.7c-91.7-203.1 19.2-405 19.2-405z" fill="#fa3757" stroke="#13192d" stroke-width="4" stroke-miterlimit="10"/><path class="st3" d="M344.5 467.1l-9.6 25.7h-19.2l-9.6-25.7c12.2 2.8 25.1 2.6 38.4 0zM359.2 149.6c-15.6-53.8-34-87.6-34-87.6s-18.3 33.5-33.8 86.9c19.5 6.6 42.8 5.5 67.8.7zM277.1 375s50.5 6.8 96.3 0l-3.7 17.6s-44.5 5.4-88.9 0l-3.7-17.6zM282.8 400.3s45.6 5.8 84.9 0l-4.3 15.1s-38.1 4.6-76.3 0l-4.3-15.1z"/><path class="st3" d="M328.1 478.7c0 60.6-1.3 109.7-2.8 109.7-1.6 0-2.8-49.1-2.8-109.7s1.3-126 2.8-126c1.5.1 2.8 65.4 2.8 126zM247.6 343.7s-23.1 96.4-2.2 226.1c0 0 10.4-126.6 45.8-140.7 0 0-7.1-24.2-10.1-35.2 0 .1-36.2-8-33.5-50.2zM402.9 343.7s23.1 96.4 2.2 226.1c0 0-10.4-126.6-45.8-140.7 0 0 7.1-24.2 10.1-35.2 0 .1 36.2-8 33.5-50.2z"/><g><circle class="st0" cx="325.3" cy="313.8" r="14.9"/><circle class="st0" cx="325.3" cy="260.4" r="14.9"/></g></g><circle class="st4" cx="360.9" cy="550.9" r="15.5"/><circle class="st4" cx="287.8" cy="594.8" r="26.9"/></svg>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. body {
  2.   background-color: #1f2740;
  3.   text-align: center;
  4.   margin: 20px auto;
  5. }
  6.  
  7. svg {
  8.   margin: 20px 20px 10px;
  9.   width: 300px;
  10. }
  11.  
  12. a {
  13.   color: #f8f3dc;
  14.   font-family: monospace;
  15. }
  16.  
  17. #approved {
  18.   clip-path: circle(at center);
  19.   border: 4px solid #f8f3dc;
  20.   border-radius: 50%;
  21.   animation: rocketShake .1s linear alternate infinite;
  22. }
  23. #approved .st0 {
  24.   fill: #13192d;
  25. }
  26. #approved .st1, #approved .st3 {
  27.   fill: #f8f3dc;
  28. }
  29. #approved .st3 {
  30.   stroke: #13192d;
  31.   stroke-width: 4;
  32.   stroke-miterlimit: 10;
  33. }
  34. #approved .st4 {
  35.   fill: #69b3b2;
  36. }
  37. #approved .rocket {
  38.   animation: rocketMove 5s linear alternate infinite;
  39. }
  40. #approved .st1 {
  41.   transform: translateY(-100%);
  42.   animation: starsMove 6s infinite;
  43. }
  44. #approved .st1:nth-of-type(5) {
  45.   animation-delay: 3.5s;
  46.   animation-duration: 8s;
  47. }
  48. #approved .st1:nth-of-type(4) {
  49.   animation-delay: 2s;
  50.   animation-duration: 3s;
  51. }
  52. #approved .st1:nth-of-type(3) {
  53.   animation-delay: .2s;
  54.   animation-duration: 6s;
  55. }
  56. #approved .st1:nth-of-type(2) {
  57.   animation-delay: 4s;
  58. }
  59. #approved .st4 {
  60.   transform: scale(0);
  61.   opacity: 0;
  62.   animation: smoke 2s 1s infinite;
  63.   transform-origin: center;
  64.   transform-box: fill-box;
  65. }
  66. #approved .st4:nth-child(9) {
  67.   animation-delay: .8s;
  68.   animation-duration: 1.5s;
  69. }
  70.  
  71. @keyframes starsMove {
  72.   to {
  73.     transform: translateY(100%);
  74.   }
  75. }
  76. @keyframes smoke {
  77.   30% {
  78.     transform: scale(2);
  79.     opacity: 1;
  80.   }
  81.   31% {
  82.     opacity: 0.5;
  83.   }
  84. }
  85. @keyframes rocketShake {
  86.   from {
  87.     transform: rotate(-0.5deg);
  88.   }
  89.   to {
  90.     transform: rotate(0.5deg);
  91.   }
  92. }
  93. @keyframes rocketMove {
  94.   50% {
  95.     transform: translateY(-15%);
  96.   }
  97.   70% {
  98.     transform: translateY(0);
  99.   }
  100.   80% {
  101.     transform: translateY(2%);
  102.   }
  103. }

Codepen 网址:https://codepen.io/marianab/pen/Mdzbeo

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!