Geçişler ve Hover Efektleri

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 24 / 43.

Bir geçiş, bir özelliği anında değiştirmek yerine belirli bir süre boyunca pürüzsüz bir şekilde değiştirmenizi sağlar.

selector {
  transition: property duration timing-function delay;
}

özellik: Geçişini yapmak istediğiniz CSS özelliği (örneğin, background-color, width, opacity).
süre: Geçişin tamamlanması için geçen süre (örneğin, 1 saniye için 1s).

timing-function: Geçişin nasıl ilerleyeceği (örneğin, linear, ease, ease-in).
delay: Geçiş başlamadan önce ne kadar bekleneceği (isteğe bağlı).

Örneğin:

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Butonun üzerine geldiğinizde, arka plan rengi 0,3 saniye içinde yeşilden maviye değişecektir.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.

Görev

Kolay

.card sınıfına bir transition özelliği ekleyin; böylece arka plan rengi ve box-shadow üzerindeki değişiklikler, 0.4 saniye içinde bir ease zamanlama fonksiyonu ile pürüzsüz bir şekilde gerçekleşsin.

Kopya kağıdı

Bir geçiş (transition), bir özelliği anında değiştirmek yerine zaman içinde sorunsuz bir şekilde değiştirmenize olanak tanır.

selector {
  transition: property duration timing-function delay;
}

property: Geçiş yapmak istediğiniz CSS özelliği (örneğin, background-color, width, opacity)
duration: Geçişin tamamlanması için geçen süre (örneğin, 1 saniye için 1s)
timing-function: Geçişin nasıl ilerlediği (örneğin, linear, ease, ease-in)
delay: Geçişe başlamadan önce ne kadar bekleneceği (isteğe bağlı)

.button {
  background-color: green;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: blue;
}

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Write your CSS here */
    .card {
      background-color: white;
      padding: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
  </style>
</head>
<body>
  <div class="card">
    Hover over me!
  </div>
</body>
</html>

Kendini test et

Bu ders kısa bir quiz içerir. Soruları yanıtlamak ve ilerlemeni kaydetmek için derse başla.