Saat şeklinde bir döngü oluşturmanın temelde iki yolu vardır
HTML ve CSS Kullanarak: div ve CSS kodu kullanarak oluşturulabilir. transform özelliğini rotate değeri ile kullanarak döndürme yapılır.
CSS ve SVG Kullanarak: SVG (Scalable Vector Graphics) dosyaları sayesinde vektörel grafikler oluşturulabilir. Bir saat oluşturmak için bir SVG dosyası kullanılır.
Genel olarak, bir saat oluştururken CSS'in position, transform, animation, ve border-radius özelliklerinden faydalanırsınız. Bu özellikler sayesinde saat oluşturulurken divler ve işaretlerin konumlandırılması ve dönmesi sağlanır.
Örneğin, bir saat yaparken şu adımlar izlenir:
- div kullanarak saat şekli oluşturulur.
- Saat sayıları ve işaretleri div veya SVG kullanarak oluşturulur ve saat şekline yerleştirilir.
- CSS ile bu saat şekli döndürülür. Bu, transform: rotate() özelliği kullanılarak yapılır.
- İstersek, saat döndükçe saat sayıları veya işaretlerin de dönmesini sağlayacak bir animasyon ekleyebiliriz.
Kısacası, saat oluştururken genellikle CSS'in position, transform, animation, ve border-radius gibi özelliklerinden faydalanılır. Bu sayede saat şekli ve işaretleri oluşturulur, şekil döndürülür ve animasyon eklenir.
Saat Örneği
<br> .saat {<br> width: 100px;<br> height: 100px;<br> border: 10px solid blue;<br> border-radius: 50%;<br> position: relative;<br> animation: saat 3s linear infinite;<br> }</p><p> .saat:before, .saat:after {<br> content: '';<br> position: absolute;<br> width: 2px;<br> height: 50px;<br> background-color: red;<br> top: 50%;<br> left: 50%;<br> transform-origin: 50% 100%;<br> }</p><p> .saat:before {<br> transform: rotate(30deg);<br> }</p><p> .saat:after {<br> transform: rotate(60deg);<br> }</p><p> @keyframes saat {<br> 0% {<br> transform: rotate(0deg);<br> }<br> 100% {<br> transform: rotate(360deg);<br> }<br> }<br>
Bakabilirsiniz