Labkom99.com - Ini adalah salah satu efek animasi roket meluncur keren dengan HTML5 CSS3 dan svg yang perlu anda coba. Roket efek khusus ini dibuat menggunakan SVG, dan efek animasi roket meluncur menggunakan animasi CSS3Sebelum labkom99 mulai menggunakan SVG, mari belajar memahami SVG terlebih dahulu dan mengapa menggunakan SVG.

Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG

SVG singkatan dari Scalable Vector Graphics. Jika Anda pernah menggunakan Adobe Illustrator, saya yakin Anda sudah tidak asing lagi dengan gambar dalam format yang satu ini.

Mengapa menggunakan SVG?
File sangat kecil
Mampu menskalakan tanpa kerugian
Efek luar biasa pada layar Retina
Kemampuan untuk mengontrol desain gaya gambar, seperti interaksi dan filter


    Dukungan browser
    IE8 dan versi yang lebih rendah tidak mendukung
    Android 2.3 dan versi yang lebih rendah tidak didukung
    Dukungan browser lain


    Alat / bahan baku

    Notepad
    Atau dapat menggunakan tools pemrograman HTML lain


    Perhatian 

    Bagi pemula yang ingin mencoba untuk membuat animasi roket meluncur keren pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template html. Sebelumnya labkom99 telah membuat Tutorial Belajar Dasar - Dasar HTML: Hypertext Markup Language. Dan cara menyimpan dan cara membuka file HTML yang sudah di bahas  pada pembahasan Bagaimana Cara Membuat Template HTML 


    Metode / langkah

    Seperti yang sudah dijelaskan diatas bawa efek animasi roket meluncur keren menggunakan HTML5 dan svg, dan kita perlu menyiapkan file HTML5 DANsvg terlebih dahulu untuk membuat roket :
    <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>    
    Ada banyak kode svg yang dapat anda coba di w3.org
    Setelah kode svg diatas sudah didapatkan tinggal mengatur CSS3 seperti dibawah ini:
    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%);
      }
    }

    Nah jika CSS3 sudah tinggal Demonya





    Dan dibawah ini source code HTML lengkapnya 
    <html>
    <head>
    <title> Labkom99.com - Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG</title>
    <style>
    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%);
      }
    }
        </style>
        <body>
        <p> Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG</p>
        <p>Labkom99.com</p>
       <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>     
        </body>
        </head>
    </html>
    

    Komentar