Bugün Html ve Css kodları yazarak güp güp atan kalp 🙂 örneği yapacağız.
Örneğimizin son hali aşağıdaki gibi olacak.
Kodlarımızı yazarken Css3 özelliklerinden animation, transform ve position gibi özellikleri kullanıyoruz. Bu özellikler ile ilgili eksikleriniz varsa şu linklerden konu anlatımlarına bakabilirsiniz.
Artık kodlarımızı yazmaya başlayabiliriz.
Html Kodları
|
1 2 3 |
<div class="heart"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.heart { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: red; height: 50px; width: 50px; transform: rotate(-45deg); animation-name: heart; animation-duration: 1s; animation-iteration-count: infinite; } .heart:after { background-color: red; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: 0px; left: 25px; } .heart:before { background-color: red; content: ""; border-radius: 50%; position: absolute; width: 50px; height: 50px; top: -25px; left: 0px; } @keyframes heart { 0% { transform: scale(1) rotate(-45deg); } 50% { transform: scale(0.6) rotate(-45deg); } } |
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
