Öncelikle html dosyamızı kuralım ve cssmizi çağıralım.

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
[B]        <link rel="stylesheet" href="style.css">[/B]
        <title>Document</title>
    </head>

    <body>
        <section><span></span></section>
    </body>

</html>
Cssimizi style.css diye çağırdıktan sonra sıra css dosyamıza bulut yapmını ayarlayalım.

Span etiketini kullanıyoruz ,
  • bulutu konumlandırmayı yapıyoruz
  • Genişlik ve yükseklik 50 pikseldir
  • Arka plan rengi: beyaz
span {
  background: white;
  height: 50px;
  width: 50px;
  position: relative;
}
Etki diyagramı aşağıdaki gibidir

Adım 2


Açıklığa 5 gölge eklemek için box-shadow özelliğini kullanın
[B] box-shadow:  red 65px -15px 0 -4px,   /*Gölge1*/[/B]
[B]              orange 25px -25px,      /*Gölge2*/[/B]
[B]              yellow 30px 10px,        /*Gölge3*/[/B]
[B]              green 60px 15px 0 -10px, /*Gölge4*/[/B]
[B]              blue 85px 5px 0 -5px;    /*Gölge5*/[/B]
[B][/B]

Etki diyagramı aşağıdaki gibidir


Aşama 3


kareleri yuvarlama
[B]span {[/B]
[B]  border-radius: 50%;[/B]
[B]}[/B]
[B][/B]


Etki diyagramı aşağıdaki gibidir


4. Adım


5 tonun da rengini beyaz olarak değiştirin
  box-shadow: white 65px -15px 0 -4px,   
              white 25px -25px,         
              white 30px 10px,           
              white 60px 15px 0 -10px,   
              white 85px 5px 0 -5px;
Etki diyagramı aşağıdaki gibidir.

Adım 5


Yayılma alanını 60 piksel sola taşı

[B]span {[/B]
[B]  margin-left: -60px;[/B]
[B]}[/B]
[B][/B]




6. Adım


Yayılacak alana animasyon ekle
Animasyon efekti şu şekilde tanımlanır: beyaz bulut yukarı ve aşağı hareket eder
Yayılma alanını y ekseninde (dikey yön) yukarı ve aşağı hareket ettirmek için translateY özelliğini kullanın
  • İlk (%0): orijinal konum
  • Orta (%50): 20 piksel yukarı git
  • Bitiş (%100): orijinal konum
Animasyon animasyon kodu:
animation: cloud 5s ease-in-out infinite;
@keyframes cloud {
   /* Açıklığın orijinal konumuna geri dönmesi gerektiğinden %0 %100'ü yoksay */
  50% {
    transform: translateY(-20px);
  }
}
Etki diyagramı aşağıdaki gibidir


7. Adım


beyaz bulutun gölgesi olarak hareket etmek için span::after sözde öğesini kullanın,
  • Mutlak konumlandırma (sol: 5 piksel alt: -60 piksel)
  • yükseklik 15px genişlik 120px
  • Arka plan rengi: siyah
  • Renk Şeffaflığı: 0.2
span:after {
  background: black;
  content: '';
  height: 15px;
  width: 120px;
  opacity: 0.2;
  position: absolute;
  left: 5px;
  bottom: -60px;
}



8. Adım


Gölgeyi yuvarlamadan sonra
span:after {
  border-radius: 50%;
}

9. Adım


span::after'a animasyon ekle
Etki
  • Beyaz bulut yukarı hareket ettiğinde gölgeler küçülür ve renk daha açık hale gelir;
  • Aşağı indikçe gölge büyür ve renk koyulaşır.
span:after {
  animation: cloud_shadow 5s ease-in-out infinite;
}
@keyframes cloud_shadow {
  50% {
    transform: translateY(20px) scale(.7);
    opacity: .05;
  }
}


Not: Gerçekte gölge kısmının sadece boyut ve renk derinliğinde değişmekte olduğu, fakat pozisyonunun değişmediği renderlardan görülebilir. Bunun nedeni, yayılma animasyonunun %50'sinde span'ın translateY(-20px) yürütmesidir, eğer span::after translateY(20px)'i yürütmezse, span::after 20 piksel birlikte hareket eder. (Buradaki öz, iki etkinin birbirini iptal etmesidir; dolayısıyla span::after'ın konumu değişmemiştir)



span::after ayarlanmadıysa translateY(20px)
Ardından aşağıdaki efekt görünecektir: gölge de yukarı ve aşağı hareket ediyor



Tüm CSS Kodları


html, body {
  margin: 0;
  height: 100%;
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #93b5cf;
}


section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}


span {
  position: relative;
  animation: cloud 5s ease-in-out infinite;
  background: white;
  border-radius: 50%;
  box-shadow: white 65px -15px 0 -4px, white 25px -25px, white 30px 10px, white 60px 15px 0 -10px, white 85px 5px 0 -5px;
  height: 50px;
  width: 50px;
  margin-left: -60px;
}


span:after {
  animation: cloud_shadow 5s ease-in-out infinite;
  background: black;
  border-radius: 50%;
  content: '';
  height: 15px;
  width: 120px;
  opacity: 0.2;
  position: absolute;
  left: 5px;
  bottom: -60px;
}


@keyframes cloud {
  50% {
    transform: translateY(-20px);
  }
}


@keyframes cloud_shadow {
  50% {
    transform: translateY(0px) scale(.7);
    opacity: .05;
  }
}
Hata veya fikirleriniz için yoruma yazabilir veyahut beğenebilirsiniz.