Home CSS Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

27 November 2022

Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

Komentar
بِسْــــــــــــــــمِ اﷲِالرَّØ­ْÙ…َÙ†ِ الرَّØ­ِيم

Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

AVENGERS adalah sebuah tim tangguh dari para hero yang ada di bumi. Dalam besutan animasi 3D maupun realistic, keberadaan film ini membuat para penggemar memberikan applaus berlebih. Dan sekarang telah beredar sebuah game petarung aksi-petualangan 2020 yang dikembangkan oleh Crystal Dynamics dan diterbitkan oleh Square Enix yaitu game Marvel Avengers. Berdasarkan tim superhero Marvel Comics the Avengers, game ini terutama terinspirasi oleh literasi grup Marvel Cinematic Universe. Sungguh aduhai pembuatan game yang sangat fantastis ini.

Lihat saja kelihaian para hero yang ada di dalamnya mulai dari Spiderman dengan keandalan jaring laba-labanya, Thor dengan palu petirnya hingga Iron Man sang robot canggih serta Captain America dan masih banyak lagi. Dalam tutorial kali ini, saya akan memberikan cara membuat icon Avengers dengan CSS3. Hem keren deh nantinya. Karena meski berbentuk kartun, tetap saja ikon Marvel Avengers terlihat sempurna dan unik. Untuk arsip saya juga karena saya juga penyuka film dan juga game serta franchise Avengers. Bahkan sangat antusias sekali.

Baca Juga :



Sekarang kita berlanjut ke tutorial bagaimana membuat ikon Marvel Avengers yang terkenal dengan para heronya tersebut ya. Dimulai dari otak-atik template nih teman-teman. Setelah itu barulah kita panggil kode itu untuk bisa tampil pada tampilan blog kita. Tapi jangan kaget ya, soalnya nanti ikonnya juga mirip saja bentuknya. Jadi tidak seperti Avengers sungguhan yang realistic ya. Hanya ikon yang mirip dengan Avengers. Maklum ya karena dengan CSS3 ya jadinya dibuat mirip saja. Okelah kita mulai. Tapi sebelumnya saya mau kasih hasil akhir dari pekerjaan kita nanti. Ini dia.



Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML
4. Temukan kode ini dalam template. ]]></b:skin>. Setelah ketemu tempelkan kode dibawah ini persis diatas kode ]]></b:skin> tadi.
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:300);

$verdeHulk: #bdbd00;
$hulkPants:#581bbb;
$body:#43abf0;
$bodyShadow:#29708f;
$white:#fff;
$whiteShadow:#ffffcb;
$red:#b63700;
$skin: #fdb0a4;
$shield:#c53905;
$ironbody:#ab3300;
$irondetail:#deb800;
$ironShadow:#c98700;
$thorbody:#004278;
$thorshadow:#00272b;
$thorskin:#ffcee7;
$thorskinShadow:#ffc688;
$hammer:#382727;
$time:7s;


@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}
@mixin star($top, $left) {
   display: block;
   color: $white;
   width: 0px;
   height: 0px;
   border-right:  10px solid transparent;
   border-bottom: 7px  solid $white;
   border-left:   10px solid transparent;
   margin-top: $top;
   margin-left: $left; 
   position: absolute;
   transform:    rotate(35deg);
   &::before {
   border-bottom: 8px solid $white;
   border-left: 3px solid transparent;
   border-right: 3px solid transparent;
   position: relative; 
   height: 0;
   width: 0;
   top: -4px;
   left: -6px;
   display: block;
   content: '';
   transform: rotate(-35deg);
}
   &::after {
   position: absolute;
   display: block;
   color: red;
   top: 0px;
   left: -10px;
   width: 0px;
   height: 0px;
   border-right: 10px solid transparent;
   border-bottom: 7px solid $white;
   border-left: 10px solid transparent;
   transform: rotate(-70deg);
   content: '';
}
}
    
  
  
*, *:before, *:after { 
box-sizing:border-box;
}  

body{
   font-size:16px;
    position:absolute;
    width:100%;
    height:100%;
   font-family: 'Lato', sans-serif;
}
.wrapper {
  position:relative;
  width:550px;
  height:365px;
  margin:15% auto;
  animation: shake $time infinite;
}


//HULK
.hulk{
  position:absolute;
  margin-left:200px;
  bottom:0px;
  margin-bottom:300px; 
.head {
  width: 4.713em;
  position:absolute;
  margin-top:-2.75em;
  margin-left:3.563em;    
    border-bottom: 3.75em solid $verdeHulk;
    border-left: 0.938em solid transparent;
    border-right: 0.938em solid transparent;
    height: 0;
  z-index:10;
  &::after {
    content:"";
    width:2.25em;
    height:0.375em;
    position:absolute;
    margin-top:0.538em;
    margin-left:0.313em;
    background:#034600;
  }
  &::before{
    content:"";
    width:3.25em;
    height:0.75em;
    position:absolute;
    margin-top:-0.75em;
    margin-left:-0.25em;
    background:#034600;
    border-top-left-radius: 1.875em;
    border-top-right-radius:1.875em;
  }
}
.mouth {
  width:31px;
  height:0px;
  position:absolute;
  margin-top:25px;
  margin-left:8px;
  overflow:hidden;
  background-image:
        linear-gradient(
          to bottom,
          #fff,
          #fff 25%,
          #4b0a00 25%,
          #4b0a00 70%,
          #fff 75%,
          #fff 100%
        );
 border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  animation: mouthOpen $time infinite;
  &::before{
    content:"";
    width: 10px;
    height:7px;
    position:absolute;
    background:#902e2b;
    margin-top:9px;
    margin-left:11px;
    border-top-left-radius:0.5em; 
    border-top-right-radius: 0.5em;

  }
}
.right-arm{
   width:13.313em;
    height:13.75em;
    margin-top:1em;
    margin-left:2em;
    border-radius:50%;
    background: #b5b500;
    position:absolute;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
    animation: hulkRightarm $time infinite;
  &::after{
    content:"";
    width:12.063em;
    height:9.625em;
    border-radius:50%;
    background:white;
    position:absolute;
    transform: translateY(1.25em);
    margin-left:-3.313em;
  }
}
.left-arm
{
   width:13.313em;
    height:13.75em;
    margin-top:1em;
    margin-left:-4.3em;
    border-radius:50%;
    background: #949400;
    position:absolute;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
    animation: hulkLeftarm $time infinite;
  &::after{
    content:"";
    width: 12.063em;
    height: 9.625em;
    border-radius: 50%;
    background: white;
    position: absolute;
    transform: translateY(1.25em);
    margin-left: 4.563em;
  }
}
.fist{
   width: 4.375em;
  height: 4.375em;
  position: absolute;
  border-radius: 50%;
  margin-top: 11.7em;
  margin-left: -2.1em;
  background:#949400;
  box-shadow: 11.1em 0 0 #b5b500;
  z-index: 10;
  animation: hulkHands $time infinite; 
}

.body {
  width: 12.5em;
  height: 12.5em;
  background: $verdeHulk;
  border-radius: 50%;
  position: absolute;
  box-shadow: inset
    1.125em 0 0 darken($verdeHulk, 5%),
    -0.938em 0 0 darken($verdeHulk, 10%);
  z-index:10;
  &::before{
    content:"";
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
    position: absolute;
    margin-top: 3.125em;
    margin-left: 1.375em;
    background: darken($verdeHulk,10%);
    box-shadow: 7.625em 0 0 darken($verdeHulk, 10%);
  }
  &::after{
    content:"";
    position:absolute;
    width:0.313em;
    height:0.313em;
    border-radius:50%;
    margin-top:10em;
    margin-left:5.625em;
    background:darken($verdeHulk,10%);
    box-shadow: 0 2.625em 0 #9ac7f1
  }
}
.right-leg {
  width:0.625em;
  height:6.438em;
  position:absolute;
  margin-left:4.25em;
  margin-top:12.3em;
  background-image:
        linear-gradient(
          to bottom,
          darken($hulkPants,20%),
          darken($hulkPants,20%) 50%,
          darken($verdeHulk,20%) 50%,
          darken($verdeHulk,20%) 100%
        );
   animation:hulkPants2 $time infinite ;
  &::after{
    content:"";
    width:0.938em;
    height:0.875em;
    position:absolute;
    margin-left:0.625em;
    background:darken($hulkPants, 10%);
  }
  &::before {
    content:"";
    width:1.125em;
    height:0.188em;
    position:absolute;
    margin-top:6.25em;
    margin-left:-1.125em;
    background:darken($verdeHulk,20%);
  }
}
.left-leg{
  width:0.625em;
  height:6.438em;
  position:absolute;
  margin-left:6.688em;
  margin-top:12.3em;
  background-image:
        linear-gradient(
          to bottom,
          $hulkPants,
          $hulkPants 50%,
          $verdeHulk 50%,
          $verdeHulk 100%
        );
  animation:hulkPants $time infinite ;
  &::after{
    content:"";
    width:0.938em;
    height:0.875em;
    position:absolute;
    background:$hulkPants;
    margin-left:-0.938em;
  }
  &::before {
    content:"";
    width:1.125em;
    height:0.188em;
    position:absolute;
    margin-top:6.25em;
    margin-left:0.625em;
    background:$verdeHulk;
  }
}
}    
    
//CAPTAIN AMERICA    
.captain {
 position: absolute;
 z-index: 1000; 
 margin-left: 355px;
 bottom: 0px;
 margin-bottom: 146px;
   .head {
    width: 21px;
    height: 36px;
    background: $body;
    position: absolute;
    margin-top: -36px;
    margin-left: 44px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: $white;
    text-align: center;
    font-size: 0.6em;
    font-weight: bold; 
    &::before{
    content:"";
    width: 21px;
    height: 17px; 
    background: $skin;
    position: absolute;
    margin-left: -7px;
    margin-top: 19px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: inset 8px 0 0 0 darken($skin, 5%);
  }
   &::after {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    background: $skin;
    border-radius: 50%;
    margin-top: 16px;
    margin-left: -5px;  
    }   
}
.body 
    {
    height: 53px;
    width: 107px; 
    border-radius: 0 0 110px 110px;
    background: $body;
    box-shadow: inset 8px 0px 0 0 $bodyShadow, inset 17px 0px 0 0 darken($body,3%);
    z-index: 5; 
    &::before {
    content:"";
    width: 133px;
    height: 30px;
    margin-left: -14px;  
    position: absolute;  
    border-radius: 30px;  
    background-image:  linear-gradient(to right,$bodyShadow, $body);
    z-index:-1;  
    }
    &::after{
    content:'';  
    width: 30px;
    height: 10px;
    position: absolute;
    margin-top: 49px;
    margin-left: 38px; 
    background-image: linear-gradient(to right, darken($red,5%), darken($red,5%) 30%, $whiteShadow 30%, $whiteShadow 70%, $red 70%, $red 100%);  
    }
     .star{
      @include star(18px,43px)
      }
  }  
  .arms {
    width: 10px;
    height: 60px;
    position: absolute;
    background: $whiteShadow;
    margin-top: -30px;
    margin-left: 10px;
    box-shadow: 75px 0 0 0 $whiteShadow;
    z-index: -1;
    &::before{
      content:"";
      width: 28px;
      height: 50px;
      position: absolute;
      background: $whiteShadow;
      border-radius: 30% 50%; 
      margin-left: -18px;
      margin-top: -3px;
      box-shadow: 95px 0 0 0 $whiteShadow;
    }
  }
  .shield {
        width: 40px;
        height: 40px;
        background: $body;
        border-radius: 50%;
        position: absolute;
        z-index: 100;
        margin-left: 75px;
        margin-top: 30px;
        box-shadow: 0 0 0 8px $whiteShadow, 0 0 0 18px $shield;
        transform:rotate(-30deg);
        .star{
      @include star(15px,10px); 
      }
      }         
  .hands {
    width: 15px;
    height: 30px;
    position: absolute;
    margin-top: 29px;
    margin-left: 8px;  
    background: darken($red, 3%); 
    transform: skew(10deg); 
    &::before {
      content:"";
      width: 10px;
      height: 30px;
      background: darken($verdeHulk, 2%);
      position: absolute;
      margin-left: 12px;  
      transform: skew(-10deg);
      }
      &::after {
      content:"";
      width: 13px;
      height: 13px;
      border-radius: 50%;
      position: absolute;
      margin-top: 21px;
      margin-left: -1px; 
      background: darken($red, 3%);
      }  
    }
    .legs {
      width: 8px;
      height: 100px;
      background: $bodyShadow;
      position:absolute;
      margin-left: 38px;
      margin-top: 5px;
      box-shadow: 22px 0 0 0 $body;
      &::before {
        content:"";
        width: 30px;
        height: 5px;
        background: darken($red,20%);
        position:absolute;     
     }
      &::after {
      content: "";  
      width: 14px;
      height: 9px;
      background-image: linear-gradient(to right, $bodyShadow, $body);
      position: absolute;
      margin-left: 8px;  
      margin-top: 5px;
      }    
    }
    .boots {
      width: 10px;
      height: 41px;
      position: absolute;
      margin-top: 105px;
      margin-left: 37px;
      background: darken($red, 10%);
      box-shadow: 22px 0 0 0 $red;
      &::after {
        content:"";
        width: 25px;
        height: 2px;
        position: absolute;
        background: darken($red, 10%);
        margin-top: 39px;
        margin-left: -15px;
        box-shadow: 40px 0 0 0 $red;
        }
      &::before{
        content: "";
        width: 18px;
        height: 12px;
        background: darken($red, 10%);
        position: absolute;
        margin-left: -4px;
        box-shadow: 22px 0 0 0 $red;
        }  
      }  
}    
    
//IRONMAN
 .ironman {  
 position: absolute;
 z-index: 900; 
 margin-left: 0;
 margin-bottom:135px;  
 bottom:0;
  .helmet {
  width:22px;
  height:34px;
  background:$ironbody;
  position: absolute;
  margin-top: -33px;
  margin-left: 44px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow:hidden;
  &::before {
    content:"";
    width:7px;
    height:2px;
    background:white;
    position:absolute;
    margin-top:10px;
    margin-left:0px;
    z-index:3; 
    box-shadow:15px 0 0 0 white; 
  }  
}    
  .mask{
    width:10px;
    height:18px;
    background:$irondetail;
    position:relative;
    margin-top:7px; 
    margin-left:6px;
    &::before {
      content:"";
      width:13px;
      height:18px;
      background:$irondetail;
      position:absolute;
      transform:rotate(60deg);   
      margin-top:-3px; 
      margin-left:4px; 
    }
    &::after {
      content:"";
      width:13px; 
      height:18px;
      background:$irondetail;
      position:absolute;
      transform:rotate(-60deg);  
      margin-top:-3px; 
      margin-left:-5px;  
    }
 }  
 .body {
   height: 53px;
    width: 107px; 
    border-radius: 0 0 110px 110px;
    background: $ironbody;
    box-shadow: inset 10px 0px 0 0 darken($ironbody,5%), inset 20px 0px 0 0 darken($ironbody,3%); 
   padding-top:11px; 
   z-index:50;
   &::before {
     content:"";
     width:32px;
     height:32px;
     background: darken( $ironbody, 5%);
     position:absolute;
     border-radius:50%;
     margin-left:-15px; 
     margin-top:-18px;
     box-shadow:105px 0 0 0 $ironbody;
     z-index:50;
   }
   &::after {
     content:"";
     width:40px;
     height:30px;
     position:absolute;
     margin-top:20px;
     margin-left:35px;
      background-image:
        linear-gradient(
          to right, 
          darken($ironbody, 5%),
          darken($ironbody, 5%) 15%,
          darken($ironbody, 3%) 15%,
          darken($ironbody, 3%) 29%,
          $ironbody 20%,
          $ironbody 20%
        );    
   }
 }   
 .power {
   width:17px;
   height:17px;
   background:white;
   border-radius:50%;
   margin:0 auto;
   box-shadow:0 0 0 5px $irondetail; 
 }
 .left-leg {
  width:10px;
  height:90px;
  background: $ironShadow; 
  position:absolute;
  margin-left:35px;
  margin-top:12px;
  border-top-right-radius:10px;
  &::before {
    content:"";
    width:25px;
    height:65px;
    background: darken($ironbody,5%);
    position:absolute;
    border-top-right-radius:20px;
    margin-top:60px;
    margin-left:-10px;    
  }
}
.right-leg {
  width:10px;
  height:90px;
  background: $irondetail; 
  position:absolute;
  margin-left:65px;
  margin-top:12px;
  border-top-left-radius:10px;
  &::before {
    content:"";
    width:25px;
    height:65px;
    background: $ironbody;
    position:absolute;
    border-top-left-radius:20px;
    margin-top:60px;
    margin-left:-5px;    
  }  
}
.left-arm{ 
  width:10px;
  height:45px;
  background:$ironShadow;
  position:absolute;
  margin-left:-6px;
  margin-top:18px;
  border-bottom-left-radius:20px;
  &::before {
    content:"";
    height: 60px;
    width: 31px; 
    border-radius: 60px 0px 0px 60px;
    background: darken($ironbody,5%);
    position:absolute;
    margin-top:30px;
    margin-left:-21px;
    z-index:-1;  
  }
  &::after {
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background: darken($ironbody,5%);
    position:absolute;
    margin-top:80px;
    margin-left:5px;  
  }
}

.right-arm{ 
  width:10px;
  height:45px;
  background:$ironShadow;
  position:absolute;
  margin-left:105px;
  margin-top:18px;
  border-bottom-right-radius:20px;
  &::before {
    content:"";
    height: 60px;
    width: 31px; 
    border-radius: 0px 60px 60px 0px;
    background: $ironbody;
    position:absolute;
    margin-top:30px;
    margin-left:0px;
    z-index:-1;  
  }
  &::after {
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:$ironbody;
    position:absolute;
    margin-top:80px;
    margin-left:-5px;
    
  }
}   

}

//THOR
.thor{
  position:absolute;
  margin-left:118px; 
  z-index:1000;
  margin-bottom:220px; 
  bottom:0;
  .helmet{
      width: 0;
      height: 0;
      position:absolute;
      border-left: 18px solid transparent;
      border-right: 18px solid transparent;
      border-bottom: 40px solid #d7a900;
      margin-top:-40px;
      margin-left:42px;
      box-shadow:0 -18px 0 -16px #66999a; 
    &::before {
      content:"";
      width:13px;
      height:25px;
      position:absolute;
      background:#66999a;
      margin-left:-19px; 
      margin-top:-12px;
      border-bottom-left-radius:10px;
      border-top-right-radius:15px;
      box-shadow:inset -3px 0px 0 transparent; 
    }
    &::after {
      content:"";
      width:13px;
      height:25px;
      position:absolute;
      background:#89b9ef;
      margin-left:10px; 
      margin-top:-12px;
      border-bottom-right-radius:10px; 
      border-top-left-radius:15px;
      box-shadow:inset -3px 0px 0 transparent;
    }
  }
  .head {
    width:21px;
    height:40px;
    background-image:linear-gradient(#72a9d5, #72a9d5 32%,#ffdeef 10%);
    position:absolute;
    margin-top:-40px;
    margin-left:50px;
    border-radius:30px 30px 0 0;
    overflow:hidden;
    &::after {
      content:"";
        width:10px;
        height:17px;
        background:#d7a900;
        position:absolute;
        border-radius:10px 10px 0px 0px;
        margin-top:20px;
        margin-left:5px;
    }
    .beard{
      width:21px;
      height:5px;
      background:#d7a900;
      position:absolute;
      margin-top:12px; 
      &::before {
        content:"";
        width:11px;
        height:5px;
        background:#d7a900;
        position:absolute;
        margin-left:12px;
        margin-top:17px;
        transform:rotate(-40deg); 
      }
      &::after {
        content:"";
        width:11px;
        height:5px;
        background:#d7a900;
        position:absolute;
        margin-left:-3px;
        margin-top:17px;
        transform:rotate(40deg); 
      }
    }
  }
.body {
  border-top: 65px solid $thorbody;
  border-left: 40px solid transparent;
  border-right:40px solid transparent;
  height: 0;
  width: 120px;
  position:absolute;
  &::before {
    content:"";
    width:40px;
    height:5px;
    position:absolute;
    background-image: linear-gradient(to right, #c98700, #d7a900);
  }
  &::after {
    content:"";
    width:30px;
    height:30px;
    border-radius:50%;
    position:absolute;
    background:#94bdef;
    margin-top:-60px;
    margin-left:-17px;
    box-shadow:45px 0 0 0 #94bdef,
      10px 29px 0 -5px #94bdef,
      35px 29px 0 -5px #94bdef
      ;
  }
}
  .arm-right {
    width:40px;
    height:40px;
    background:$thorskin;
    border-radius:50%;
    position:absolute;
    margin-left:100px;
    box-shadow:-5px 0 0 $thorskin, -10px 0 0 $thorskin,-15px 0 0 $thorskin,   -20px 0 0 $thorskin, -20px 90px 0 -15px $thorskin, -20px 95px 0 -15px $thorskin, -20px 100px 0 -15px $thorskin  
      ;
    &::before {
      content:"";
      width:40px;
      height:100px;
      position:absolute;
      background:$thorskin;
      margin-left:-5px;
      margin-top:10px;
      border-bottom-right-radius:30px;
    }
    &::after {
      content:"";
      width:10px;
      height:5px;
      background:#290000;
      position:absolute;
      margin-top:113px;
      margin-left:-5px;
    }
  }
  .arm-left {
    width:40px;
    height:40px;
    background:$thorskinShadow;
    border-radius:50%;
    position:absolute;
    margin-left:0px;
    box-shadow:-5px 0 0 $thorskinShadow, -10px 0 0 $thorskinShadow,-15px 0 0 $thorskinShadow,   -20px 0 0 $thorskinShadow, 0 90px 0 -15px $thorskinShadow,0 95px 0 -15px $thorskinShadow, 0 100px 0 -15px $thorskinShadow; 
    &::before {
      content:"";
      width:40px;
      height:100px;
      position:absolute;
      background:$thorskinShadow;
      margin-left:-15px;
      margin-top:10px;
      border-bottom-left-radius:30px;
    }
    &::after {
      content:"";
      width:10px;
      height:5px;
      background:#290000;
      position:absolute;
      margin-top:113px;
      margin-left:15px; 
    }
  }
  
  .legs{
    width:13px;
    height:67px;
    background:darken($thorbody,7%);
    position:absolute;
    margin-top:70px;
    left:40px;
    border-radius:0 0 30px 30px;
    box-shadow:27px 0 0 0 $thorbody;
    &::before {
      content:"";
      width:10px;
      height:75px;
      position:absolute;
      background:darken($thorbody,7%);
      margin-left:5px;
      box-shadow: 0 75px 0 0 #b75600, 21px 0 0 0 $thorbody, 21px 75px 0 0 #ce9700;
    }
    &::after {
      content:"";
      width:11px;
      height:10px;
      background-image: linear-gradient(darken($thorbody,7%), $thorbody);
      position:absolute;
      margin-left:15px;
    }
  }
  .cap {
    width:120px;
    height:200px;
    position:absolute;
    background:#a72300;
    z-index:0;
    box-shadow:inset 10px 0 0 #721200, inset 20px 0 0 #7b1e00; 
  }
  .hammer {
    width:42px;
    height:27px;
    position:absolute;
    background: $hammer; /* fallback */
  background: 
    linear-gradient(135deg, transparent 5px, $hammer 0) top left,
    linear-gradient(225deg, transparent 5px, $hammer 0) top right,
    linear-gradient(315deg, transparent 5px, $hammer 0) bottom right,
    linear-gradient(45deg,  transparent 5px, $hammer 0) bottom left; 
  background-size: 52% 52%; 
  background-repeat: no-repeat;
    margin-top:148px;
    margin-left:1px;
    &::before{
      content:"";
      width:6px;
      height:25px;
      background:darken($hammer,5%);
      position:absolute;
      margin-top:-23px;
      margin-left:18px;
    }
    &::after {
      content:"";
      width:6px;
      height:3px;
      position:absolute;
      background:darken($hammer,5%);
      margin-top:25px;
      margin-left:18px;
    }
  }
  .feet {
    width:25px;
    height:2px;
    position:absolute;
    background:#b75600;
    margin-top:220px;
    margin-left:30px; 
    box-shadow:36px 0 0 #ce9700;
    &::after {
     content:""; 
     height:10px;
     width:20px;
     position:absolute; 
     border-radius: 90px 90px 0 0;
     background:#ce9700;
     margin-top:-85px;
     margin-left:8px; 
    box-shadow:24px 0 0 #b75600;  
    }
  }
}  
    
.awwwards {
  position: absolute;
  top: 30px;
  left: 70px;
}
.awwwards a {
  color: #ab3300;
  text-decoration: none;
  border-bottom: 1px solid #ab3300;
}     
    
/*Hand Animation*/
@include keyframes(shake) { 
 78%, 80%,82%,84%,86%,88%,90%,92% { 
    
    top:3px;
    left:2px; 
  }
  79%,81%,83%,85%,87%,89%,91% {
   
    top:0px;
    left:-2px;
  } 
  
}

@include keyframes(mouthOpen) {
  77%{height:0px;}
  80%{
    height:22px;
  }
  93%{
    height:22px;
    opacity:1;
  }
  95%{
    height:0px;
    opacity:0;
  }

}

@include keyframes(hulkHands){
 6%{
   box-shadow: 11.1em 0 0 #b5b500;
 }
 77%{
   box-shadow: 11.1em 0 0 #b5b500;
   margin-left:-2.1em; 
   @include translate (0,0)
  }
  80%{
    margin-left:0.5em; 
    box-shadow:8.5em 0 0 #b5b500;
    @include translate (-0.9em,-19.9em)
   
  }
  93%{
    margin-left:0.5em;
    box-shadow:8.5em 0 0 #b5b500;
    @include translate (-0.9em,-19.9em)
  }
  94%{
    box-shadow: 11.1em 0 0 #b5b500;
    margin-left:-2.1em; 
    @include translate (0em,-0em)
  }
}

@include keyframes(hulkRightarm){
  77%{
    margin-top:1em;
    margin-left:2em;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
  }
  80%{
    margin-top:-8.125em;
    margin-left:2.5em;
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
  }
  93%{
    margin-top:-8.125em;
    margin-left:2.5em;
    clip: rect(0.563em, 13.363em, 13.75em, 6.625em);
  }
  95%{
    margin-top:1em;
    margin-left:2em;
    clip: rect(-1em, 11.2em, 12.55em, 7.625em);
  }
}
@include keyframes(hulkLeftarm){
  77%{
    margin-top:1em;
    margin-left:-4.3em;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
  }
  80%{
    margin-top:-8.125em;
    margin-left:-4.375em;
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
  }
  93%{
    margin-top:-8.125em;
    margin-left:-4.375em;
    clip: rect(-0.188em, 6.563em, 13.875em, 0em);
  }
  95%{
    margin-top:1em;
    margin-left:-4.3em;
    clip: rect(-0.188em, 6.1em, 13.875em, 2.3em);
  }
  }
.footer--love {
  position:absolute;
  right: 1.5rem;
  bottom: 2.5rem;
  font-size: 0.85rem;
  font-family: 'Lato', sans-serif;
  z-index:9999;
  .love-heart {
    background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg);
    width:16px;
    height:16px;
    display:inline-block;
    margin:0 5px 0 2px; 
    vertical-align:top;
  }
  a {color:#43abf0;}
}


Setelah itu barulah kita tempelkan kode dibawah ini di mana saja kalian mau. Bila dipasang di postingan, pastikan pada mode HTML bukan compose ya. Ini dia.
<div class="wrapper">
  <div class="hulk">
    <div class="head"><div class="mouth"></div></div>
    <div class="right-arm"></div>
    <div class="fist"></div>
    <div class="left-arm"></div>
    <div class="body"></div>
    <div class="right-leg"></div>
    <div class="left-leg"></div>
  </div>
  <div class="captain">
    <div class="head">A</div>
    <div class="body"><div class="star"></div></div>
    <div class="arms"></div>
    <div class="shield"><div class="star"></div></div> 
    <div class="hands"></div>
    <div class="legs"></div>
    <div class="boots"></div>
  </div> 
  <div class="ironman">
    <div class="helmet"><div class="mask"></div></div>
    <div class="right-arm"></div>
    <div class="left-arm"></div>
    <div class="body"><div class="power"></div></div>
    <div class="right-leg"></div>
    <div class="left-leg"></div>
  </div>  
<div class="thor">
    <div class="helmet"></div>
    <div class="head">
    <div class="beard"></div>
    </div>
    <div class="cap"></div>
    <div class="arm-right"></div>
    <div class="arm-left"></div>
    <div class="body"></div>
    <div class="hammer"></div>
    <div class="legs"></div>
    <div class="feet"></div>
  </div> 
</div>
</div>


Nah sudah jadi tampilan ikon Marvel Avengersnya. Saatnya kalian mencoba mempraktekkan itu ya. Sekian tutorial yang dapat saya sampaikan, selamat malam dan Salam Blogger. Dalam kutipan termashur, terdapat kata-kata mutiara yang sangat bagus menurut saya. "Salah satu teman kamu yang memberikan applaus paling keras dan memberikan pujian paling depan, merekalah yang berpotensi paling besar menikungmu dari belakang." Jadi ingat pesan orang tua. Kita mesti Hati-hati dan Waspada menghadapi jaman yang semakin keras. Jangan khawatir, tetap dekat denganNya, karena hanya Dia yang mampu membantu kita tatkala kita terpuruk, bukan teman maupun sahabat kita.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3 . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Related Posts
Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )