Membuat Animasi Gradasi Warna Menggunakan Linear Gradient Dan Radial Gradient

Oke untuk kesempatan kali ini, kembali saya akan membagikan sebuah animasi. Namun berbeda dengan sebelumnya, disini saya mencobanya dengan objek dan menggunakan gradasi. Ini terbilang sungguh bagus, kenapa bagus? Karena animasi ini telah dibalut dan dirancang dengan warna gradient atau gradasi yang begitu indah.

Apa itu gradient???

Gradient adalah suatu konsep penggabungan dua warna atau lebih. Pada umumnya ada 2 tipe warna gradient atau gradasi yang dapat di buat dengan css3 yaitu, linear gradient dan radial gradient. Linear gradient adalah gradient yang berbentuk warna yang berdampingan tapi efeknya sangat lembut. Jadi 2 atau beberapa warna akan terlihat menyatu, baik itu atas ke bawah atau kiri ke kanan. Sedangkan radial gradient adalah warna gradient yang memiliki pusat yang bertitik ditengah, jadi seperti membentuk lingkaran dalam pewarnaannya.

Sekarang Sobat sudah mengertikan, apa itu gradient atau gradasi..

Nah sebelum itu, disini kita memerlukan CSS/SCSS dan HTML sebagai bahanya.
Oke, mungkin kita langsung saja dan sobat bisa lihat kode-kodenya dibawah ini.

#. HTML

<div class="container">

  <h1>Seotechman CSS Gradients</h1>

  <p>Solid to solid color | Grainy blend only | Reduced banding | Pure CSS Gradients<br><span>Click/tap & hold on items for more colors</span></p>

  <div class="item item--sphere item--color1"></div>

  <div class="item item--sphere item--color2"></div>

  <div class="item item--sphere item--color3"></div>

  <div class="item item--sphere item--color4"></div>

  <div class="item item--pudding item--color5"></div>

  <div class="item item--droplet item--color6"></div>

  <div class="item item--vase item--color7"></div>

  <div class="item item--egg item--color8"></div>

  <div class="item item--cell"></div>

</div>

#. CSS/SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);

$size: 130px;

$scale: 1.05;

$border-radius: $size / 2;

$grad-position: 100% 0;

$grad-start: 25%;

$grad-stop: 65%;

$duration: 3.5s;

$noise: url('data:image/png;base64,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');

@mixin dithered-gradient($position, $start, $stop, $color) {

  background: radial-gradient(circle at $position, transparent $start, $color $stop);

  mask: $noise, radial-gradient(circle at $position, transparent $start, #000 ($stop + 10%));

}

@mixin radial-gradient-item($position, $start, $stop, $color) {

  background: repeat-x $position / 50% 100% radial-gradient(circle at 50% 0, transparent $start, $color $stop);

}

@mixin item-unicolor($color) {

  color: $color;

  &::before { @include radial-gradient-item($grad-position, $grad-start, $grad-stop, $color); }

}

@mixin item-bicolor($color1, $color2) {

  background-color: $color2;

  @include item-unicolor($color1);

}

@mixin item-tricolor($color1, $color2, $color3) {

  color: $color3;

  background-color: $color1;

    &::before { @include radial-gradient-item($grad-position, 15%, 45%, $color2); }

    &::after { @include radial-gradient-item($grad-position, 50%, 75%, $color3); }

}

$light: #ffecd2;

$dark: #222;

$color1: #7f5fff;

$color2: #fa709a;

$color3: #ff9673;

$color4: #fec440;

$color5: #72f9c1;

$color6: #5193ff;

$color7: #fd2472;

$color8: #5e21d6;

$color9: #e7627d;

$color10: #3d1635;

html {

  height: 100%;

  font-family: 'Roboto Condensed', sans-serif;

  color: $dark;

}

body {

  margin: 0;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100%;

  background-color: #effeff;

  &::before, &::after {

    content: "";

    position: absolute;

    top: 0; left: 0;

    z-index: -1;

    display: block;

    width: 100%;

    height: 100%;

  }

  

  &::before {

    @include dithered-gradient(50%, 30%, 60%, #6cc8ff)

  }

  

  &::after {

    mask-image: $noise, linear-gradient(45deg, #000 0%, transparent 25%, transparent 75%, #000 100%);

    background: linear-gradient(45deg, #6d6dff 10%, transparent 25%, transparent 75%, #fbffbe 90%);

  }

}

h1 {

  margin: 0 0 10px 0;

  text-transform: uppercase;

}

p {

  margin: 0;

}

span {

  line-height: 1.8em;

  color: $color2;

}

.container {

  box-sizing: border-box;

  max-width: 1024px;

  padding: 20px;

  text-align: center;

}

.item {

  position: relative;

  display: inline-block;

  margin: 20px 35px;

  width: $size; height: $size;

  background-color: #ffecd2;

  box-shadow: -5px 18px 25px -15px;

  overflow: hidden;

  transition: all 0.2s ease-out;

  cursor: pointer;

  image-rendering: pixelated;

  -webkit-tap-highlight-color: rgba(0,0,0,0);

  -webkit-tap-highlight-color: transparent;

  &::before {

    content: "";

    position: absolute;

    display: block;

    top: 0; left: 0;

    height: 100%; width: 400%;

    mask: $noise, radial-gradient(circle at 50% 0, transparent 5%, #000 ($grad-stop + 15%)) 0 0 / 50% 100%;

  }

  

  &:hover {

    transform: scale($scale);

    &.item::before, &.item::after {

      animation: spin-round $duration linear infinite;

    }

  }

  

  &:active {

      animation: hue-rotate 7s infinite;

    }

  &--sphere {

    border-radius: 50%;

  }

  

  &--egg {

   width: $size * 0.77;

   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

  &--pudding {

    width: $size; height: $size;

    border-radius: 50% 50% 10% 10%;

    

    &::after {

      content: "";

      position: absolute;

      top: 0;

      display: block;

      top: 0; left: 0;

      height: 100%; width: 400%;

      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0 / 50% 100%;

    }

  }

  &--droplet {

    width: $size * 0.77; height: $size * 0.77;

    border-radius: 5% 100% 50% 65% / 5% 65% 50% 100%;

    transform: rotate(45deg);

    box-shadow: 5px 18px 25px -15px;

  

    &:hover {

      transform: rotate(45deg) scale($scale);

    }

  }

  &--vase {

    position: relative;

    width: floor($size * 0.62); height: $size;

    border-radius: 40% 40% 70% 70% / 100%;

    

    &::after {

      content: "";

      position: absolute;

      top: 0;

      display: block;

      top: 0; left: 0;

      height: 100%; width: 400%;

      mask: $noise, radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0 / 50% 100%;

    }

  }

  

  &--cell {

    width: $size; height: $size;

    border-radius: 50%;

    color: #ff4d5d;

    background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;

    

    &::before  {

      top: 50%; left: 50%;

      transform: translate(-50%, -50%);

      width: ceil($size * 0.69); height: ceil($size * 0.69);

      border-radius: 50%;

      background: radial-gradient(circle at 0 75%, transparent 20%, #98000e $grad-stop);

      mask: $noise, radial-gradient(circle at 50%, transparent $grad-start, #000 ($grad-stop + 10%));

    }

    &:hover {

        animation: spin-flat-thick $duration linear infinite;

      

      &.item--cell::before {

         animation: spin-flat $duration linear infinite;

      }

      

      &:active {

      animation: spin-flat-thick $duration linear infinite, hue-rotate 7s linear infinite;

      }

    }

  }

  &--color1 {

    @include item-unicolor($color1);

  }

  

  &--color2 {

    @include item-unicolor($color2);

  }

  

  &--color3 {

    @include item-unicolor($color3);

  }

  

  &--color4 {

    @include item-unicolor($color4);

  }

  &--color5 {

    @include item-tricolor($light, $color9, $color10);

  }

  &--color6 {

    @include item-bicolor($color6, $color5);

  }

  &--color7 {

    @include item-tricolor($color4, $color7, $color8);

  }

  

  &--color8 {

    @include item-unicolor($dark);

  }

}

@keyframes spin-round {

  from { transform: translateX(0); }

  to { transform: translateX(-50%); }

}

@keyframes spin-flat {

  0% { transform: translate(-50%, -50%) rotateY(0); }

  25% { transform: translate(-50%, -50%) rotateY(90deg); }

  50% { transform: translate(-50%, -50%) rotateY(180deg); }

  75% { transform: translate(-50%, -50%) rotateY(270deg); }

  100% { transform: translate(-50%, -50%) rotateY(360deg); }

}

@keyframes spin-flat-thick {

  0% { transform: scale($scale) rotateY(0); }

  25% { transform: scale($scale) rotateY(75deg); }

  50% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 0 0, #ffa878 5%, transparent 75%), #ff4d5d; }

  75% { transform: scale($scale) rotateY(75deg); }

  100% { transform: scale($scale) rotateY(0); background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d; }

}

@keyframes hue-rotate {

  from { filter: hue-rotate(360deg); }

    to { filter: hue-rotate(0deg); }

}

Jika ingin mencobanya, silahkan saja. Sobat tinggal copy paste seluruh kodenya, atau sobat bisa ubah sesuai keinginan.

Itulah Animasi Gradasi Warna Menggunakan Linear Gradient Dan Radial Gradient, ala Seotechman. Terimakasih buat yang sudah selalu menyempatkan diri untuk membaca postingan-postingan diblog saya ini. Jika postingan ini menarik, sobat bisa bagikan keteman-teman lainnya dan jangan lupa Rate This Article!

Virm Aditya

Berita teknologi informasi terkini

Share this post