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

Eylül 17, 2020 0 Views

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ı

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…

Previous Article

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,…

Next Article