İçeriğe geç

CSS İle Üzerine Gelince Parlayan Resim Yapımı

Merhabalar, bu yazımda CSS3 ile üzerine gelince parlayan resim yapımını göstereceğim.

Öncellikle yapımı çok kolay.Aşağıda anlattığım adımları sırasıyla uyguladığınız zaman çalışır vaziyette olacaktır.

İlk olarak Html dosyamız içinde yapacağımız işlemleri yapalım.

 <div class="parlaklik"></div>

olarak animasyonu uygulamak istediğimiz div etiketini oluşturalım.Etiketimizi oluşturduktan sonra ise görselimizi belirleyelim

<div class="parlaklik"><img src="gorsellink.png"/></div>

Görselimizi atadıktan sonra ise Csslerimizide ekleyelim.

div.parlaklik {
    width: 450px;
    height: 400px;
    overflow: hidden;
  position: relative;
}
 
div.parlaklik::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}
 
div.parlaklik:hover::before {
    -webkit-animation: parlak .75s;
    animation: shine .75s;
}

Csslerimizide ekledikten sonra animasyonlarımızıda ekleyerke işlemimizi bitirelim.

@-webkit-keyframes parlak {
    100% {
        left: 125%;
    }
}
@keyframes parlak {
    100% {
        left: 125%;
    }
}

Kaynak:AdobeWordpress

Tarih:Html/Css

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir