<!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
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;
}
}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.
