Css Nabız (Pulse) Efekti Yapımı

Eylül 17, 2020 0 Views
Css Nabız (Pulse) Efekti Yapımı blog cover pluse Ayhan ALTINOK

Ekstra harici kütüphane kullanmadan sadece Css ve Html kullarak nabız (pulse ) efekti nasıl yapabileceğinizi anlatacağım. Bu efekti yaparken “:before,:after ve animation” kodlarından yararlanacağız. Front-end bilginizi geliştirmek için diğer Css eğitimleri  için Css kategorisini Html eğitimleri için Html kategorisindeki çalışmaları inceyebebilirsiniz.

HTML Kodlarımız

<div class="play">
  <img src="https://cdn.onlinewebfonts.com/svg/img_404212.png">
</div>

 

CSS Stil Kodlarımız

.
html,body{
  background-color:#a00;
}
.play{
  width:100px;
  height:100px;   
}
.play img{
  position:relative;
  z-index:9999; 
  border-radius:100%;
  max-width:100%;
  max-height:100%;
  filter:invert(100%);
}
.play,.play:after,.play:before{
  position:Absolute;
  z-index:9;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  border-radius:100%;
}
.play:before,
.play:after{ 
  width:100%;height:100%;
  content:' ';
  display:block;
  background: rgb(0,0,0);
  background: radial-gradient(circle, rgba(255,0,0,0) 0%, rgba(255,0,0,0) 45%, rgba(255,0,0,1) 100%);
}
.play:before{ 
  animation-name: z1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
.play:after{
  animation-name: z2;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes z1 {
  0%{transform:scale(1);opacity:0;} 
  50%{transform:scale(1);opacity:1;}
  100%{transform:scale(4);opacity:0;} 
} 
@keyframes z2 {
  0%{transform:scale(1);opacity:0;} 
  50%{transform:scale(1);opacity:1;}
  100%{transform:scale(4);opacity:0;} 
} 

Önizleme

JavaScript Konsol  Efekti Yapımı blog cover console Ayhan ALTINOK

JavaScript Konsol Efekti Yapımı

Kütüphane kullanmadan JavaScript kodu ile sitenizin bazı alanlarında bulunan metinleri hareketlendirmek isteyebilirsiniz. Örneğin sitenizin karşılama alanında sloganlarınızı ve ya atasözlerinizi sergilediğiniz bir alan var ise orada kullanarak sitenize…

CSS !important Nedir? Ne İşe Yarar? css important Ayhan ALTINOK

CSS !important Nedir? Ne İşe Yarar?

CSS1 spesifikasyonu 90'ların ortalarında ve sonlarında taslak haline getirildiğinde, !important geliştiricilerin ve kullanıcıların stil sayfalarında değişiklik yaparken normal spesifikliği kolayca geçersiz kılmalarına yardımcı olacak bildirimler tanıttı . Çoğunlukla,…

Yorumlar

Bir cevap yazın

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

Yorum Yaz
Yukarı Kaydır
Beni takip edin
Tema
Diller
Müzik
Search results will appear here