Bu basit demo, ilginç görsel efektler için CSS animasyonlarının nasıl kullanılacağını açıklıyor.
Web sitenize veya uygulamanıza hareketli bir arka plan eklemek, benzersiz ve ilgi çekici bir tasarıma katkıda bulunabilir. Yaratıcı arka planlar duyguları harekete geçirebilir ve kullanıcı deneyimini geliştirebilir.
Uygulamanız için animasyonlu bir arka plan oluşturmanın birçok yolu vardır, ancak düz HTML ve CSS'nin basit bir kombinasyonu özellikle işe yarar. Bu örneğe göz atın, kodunun nasıl çalıştığını öğrenin ve son animasyonlu arka planın canlı demosunu görün.
HTML Yapısını Oluşturun
Büyüyen ve yukarı doğru süzülen baloncuklarla mavi renkli bir arka plan oluşturacaksınız. Bu konuda nihai sonucu görebilirsiniz Kod kalemi.
Bir oluşturarak başlayın bölüm sınıfla sarıcı animasyonu barındırmak için.
Ardından baloncukları temsil edecek 10 div oluşturun. Her div'in içinde sınıfla bir yayılma alanı oluşturun nokta. Yapabilirsiniz Bu temel HTML etiketlerini 10 dakikada öğrenin HTML'de yeniyseniz.
<body>
<sectionclass="wrapper">
<h1>Animated Backgroundh1>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
<div><spanclass="dot">span>div>
section>
body>CSS Koduyla Stil
İnanılmaz şeyler yaratabilirsiniz yalnızca HTML kullanarak arka plan efektleri. Ancak bu projede arka planı şekillendirmek ve canlandırmak için CSS kullanacaksınız.
İlk olarak, arka planda boşluk olmamasını sağlamak için kenar boşluğunu ve dolguyu 0'a ayarlayın.
* {
margin: 0;
padding: 0;
}Daha sonra sarmalayıcı sınıfını kullanarak ana bölüme stil verin. Bu bölüm tüm sayfayı dolduracak şekilde %100 genişlik ve yüksekliğe sahip olacaktır. Arka plan rengini mavinin bir tonu olarak ayarlayın ve ona mutlak bir konum verin.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}H1'e mutlak konumla da stil verin. Sayfanın ortasına yerleştirmek için sol üst konumunu %50'ye ayarlayarak başlayın. Daha sonra çeviriyi kullanarak yukarı ve sola hareket ettirin, böylece merkezi tam olarak ortada olur.
.wrapperh1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}Daha sonra, animasyonlu baloncuklar gibi davranacak şekilde dairesel olacak div'leri şekillendirin. Her div'e bir yükseklik, genişlik ve kenarlık verin. Büyük kenar yarıçapı, sınırın bir daire olmasını sağlar. Ayrıca CSS animasyon özelliğini kullanarak bir animasyon süresi ayarlayın.
.wrapperdiv {
height: 60px;
width: 60px;
border: 2pxsolidrgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4slinearinfinite;
}Noktaları 5 piksel yükseklik ve genişlikte şekillendirin. Noktalara kenarlık yarıçapı ve beyaz bir arka plan verin. Her birini kesinlikle ana div'in sağ üst köşesine yakın bir yere yerleştirin.
div.dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}Daha sonra, her div'i farklı ayarlarla konumlandırmak için n'inci çocuk seçiciyi kullanın. Animasyona isim verebilirsiniz canlandırmak; bunu daha sonra @keyframes kullanarak tanımlayacaksınız.
Kullanmak n'inci çocuk (2) ilkine değinmek için div ilk çocuğundan bu yana .sarmalayıcı eleman sa1.
.wrapperdiv:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3slinearinfinite;
}.wrapperdiv:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7slinearinfinite;
}
.wrapperdiv:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9slinearinfinite;
}
Alt div'lere daha yüksek yüzdeler vererek farklı aralıklarla yukarı çıkmalarını sağlayabilirsiniz.
.wrapperdiv:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5slinearinfinite;
}.wrapperdiv:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8slinearinfinite;
}.wrapperdiv:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10slinearinfinite;
}.wrapperdiv:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6slinearinfinite;
}
.wrapperdiv:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10slinearinfinite;
}
Daireleri ve noktaları farklı aralıklarla kademeli olarak değiştirmek ve döndürmek için @keyframes'i kullanın. Aşağıdaki kodda noktalar 70 derece, daireler ise 360 derece dönüyor. Bu dönüş kabarcık efekti yaratır.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}Yapabilirsiniz CSS desenlerini kullanarak arka planları daha şık hale getirin. Desenler, harika animasyonlar oluşturmanıza yardımcı olacak dalgalar, ızgaralar, yapraklar ve diğer desenler oluşturmanıza olanak tanır.
CSS Kullanarak Birçok Özelliği Animasyonlandırabilirsiniz
CSS kullanarak farklı türde animasyonlar oluşturabilirsiniz. Bunlar arasında arka plan renginin değiştirilmesi ve animasyonun çalışma süresinin geciktirilmesi yer alır.
Ayrıca bir animasyonun ne sıklıkta, hatta sonsuza kadar çalıştırılacağını da ayarlayabilirsiniz. Animasyonun hareket etmesi gereken yönü de ayarlayabilirsiniz: ileri veya geri. Animasyonlarla oynamak eğlencelidir ve uygulamalarınızı hayata geçirmek için bunları kullanabilirsiniz.
