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

on

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 porno izle

<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