El efecto de disco giratorio, también conocido como efecto de disco superpuesto, es un tipo de efecto de ilusión que se puede utilizar para diversos fines en un sitio web. Se puede usar en cualquier cosa, desde una pegatina de cargador hasta crear una ilusión para el usuario. Se llama disco superpuesto porque hay muchos discos superpuestos que giran alrededor de un solo punto.
Enfoque: el enfoque es crear todos los discos primero y luego usar fotogramas clave y propiedades secundarias n-ésimas para rotarlos.
Código HTML: en esta sección, hemos creado una lista desordenada (ul) con elementos de lista (li) dentro. El número de elementos de la lista es igual al número de discos.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Rotating Disc Effect</title> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
Código CSS: Para CSS, siga los pasos dados.
- Lo primero es crear un disco usando la propiedad border-radius. Establezca el radio del borde en 50% para crear un círculo perfecto.
- Ahora, use la animación con un identificador para usar más tarde con los fotogramas clave. Hemos usado animate como nuestro identificador.
- Ahora, use fotogramas clave para rotar el disco para cada fotograma. Aquí hemos usado 0 grados para los primeros fotogramas y 359 grados para el segundo fotograma.
- Ahora, use la propiedad secundaria n-th para aplicar una demora de 1st a cada disco. Ayuda a girar cada disco con cierto retraso que es responsable del tipo de efecto de ilusión.
Sugerencia: puede aplicar diferentes colores de opacidad a cada disco para que se vea más atractivo.
<style>
ul {
margin: 0;
padding: 0;
position: absolute;
left: 40%;
top: 20%;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
top: 0;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
animation: animate 7s linear infinite;
transform-origin: bottom center;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ul li:nth-child(1) {
animation-delay: 0s;
}
ul li:nth-child(2) {
animation-delay: 1s;
}
ul li:nth-child(3) {
animation-delay: 2s;
}
ul li:nth-child(4) {
animation-delay: 3s;
}
ul li:nth-child(5) {
animation-delay: 4s;
}
ul li:nth-child(6) {
animation-delay: 5s;
}
ul li:nth-child(7) {
animation-delay: 6s;
}
ul li:nth-child(7) {
animation-delay: 7s;
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Rotating Disc Effect</title>
<style>
ul {
margin: 0;
padding: 0;
position: absolute;
left: 40%;
top: 20%;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
position: absolute;
top: 0;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
animation: animate 7s linear infinite;
transform-origin: bottom center;
}
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
ul li:nth-child(1) {
animation-delay: 0s;
}
ul li:nth-child(2) {
animation-delay: 1s;
}
ul li:nth-child(3) {
animation-delay: 2s;
}
ul li:nth-child(4) {
animation-delay: 3s;
}
ul li:nth-child(5) {
animation-delay: 4s;
}
ul li:nth-child(6) {
animation-delay: 5s;
}
ul li:nth-child(7) {
animation-delay: 6s;
}
ul li:nth-child(7) {
animation-delay: 7s;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sirohimukul1999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA