Here is an example of some HTML and CSS code that you could use to create a spiral animation:
This code creates an SVG element with a spiral shape and animates it using a CSS @keyframes animation. The spiral will spin indefinitely with a duration of 5 seconds for each full rotation. You can customize the code to change the size, color, and other properties of the spiral, as well as the animation timing and other aspects of the animation.
Code : <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #333;
}
.spiral {
width: 100px;
height: 100px;
margin: 20px auto;
animation: spin 1s infinite linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<svg class="spiral" viewBox="0 0 100 100">
<path d="M50,0 C22.4,0 0,22.4 0,50 C0,77.6 22.4,100 50,100 C77.6,100 100,77.6 100,50 C100,22.4 77.6,0 50,0 Z M50,88.5 C26.8,88.5 8.5,70.2 8.5,47 C8.5,23.8 26.8,5.5 50,5.5 C73.2,5.5 91.5,23.8 91.5,47 C91.5,70.2 73.2,88.5 50,88.5 Z" />
</svg>
</body>
</html>
Comments
Post a Comment