Introducción:
Un día escuchando una platica de @kj con @Crayder sobre programación vino a mi la idea de hacer una Ruleta en css como reto. 🤯🤓🤔
Más adelante a medida que terminaba la ruleta pesé que seria buena idea darle una animación.🤔
Cabe destacar la ayuda y el seguimiento de @RuiLlexy en el difícil proceso de generar un circulo perfecto a partir de conos.
Bien vamos a lo que toca.
1. Estructura en html
Para generar la ruleta fue necesario usar como guía un círculo esto para mi fue lo más importante ya que sin ello cada que alineaba los conos terminaba algo deforme.😅
Con este miniproyecto practique un poco de css grid.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Rulette</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-element">
<div class="container-title">
<p>¡Rulette CSS con animación!</p>
</div>
<div class="contain-arrow">
<div class="arrow"></div>
</div>
<div class="contain-rulette">
<div class="container-cone">
<div class = "circle"></div>
<div class = "cone1 size"></div>
<div class = "cone2 size"></div>
<div class = "cone3 size"></div>
<div class = "cone4 size"></div>
<div class = "cone5 size"></div>
<div class = "cone6 size"></div>
<div class = "cone7 size"></div>
<div class = "cone8 size"></div>
</div>
</div>
</div>
</body>
</html>
2. Css de la ruleta
En esta parte cree los conos con clip-path, esto lo tuve que reaprender, también tuve que usar transform para darle el ángulo correcto a cada cono.
@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Secular+One&display=swap');
body {
background: #073071;
margin: 0;
}
.container-element {
height: 100vh;
width: 100vw;
display: grid;
grid-gap: 15px;
justify-items: center;
grid-template-columns: 1fr;
grid-template-rows: 50px 50px 1fr;
}
.container-title {
display: grid;
font-weight: bold;
font-size: 25px;
text-align: center;
height: 65px;
width: 100vw;
font-family: 'Secular One', sans-serif;
}
.contain-rulette {
height: 350px;
width: 50vw;
display: grid;
align-items: center;
justify-items: center;
justify-content: center;
}
.container-move{
display: grid;
}
.container-element .container-title {
grid-column: 1/2;
grid-row: 1/2;
}
.container-element .contain-arrow {
grid-column: 1/2;
grid-row: 2/3;
width: 50px;
height: 50px;
}
.container-element .contain-rulette {
grid-column: 1/2;
grid-row: 3/4;
}
.container-cone {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
border: 5px solid #f7981f;
border-radius: 50%;
}
.size {
width: 350px;
height: 350px;
border-radius: 50%;
grid-column: 1/2;
grid-row: 1/2;
}
.arrow{
width: 50px;
height: 50px;
background:#cacaca;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
transform: rotate(270deg);
}
.circle {
width: 350px;
height: 350px;
border-radius: 50%;
background: blue;
grid-column: 1/2;
grid-row: 1/2;
}
.cone1 {
background: #ff64bb;
clip-path: polygon(50% 0, 50% 50%, 0 0);
}
.cone2 {
background: #fff;
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(45deg);
}
.cone3 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(90deg);
background: #00b7ff;
}
.cone4 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(135deg);
background: #536eff;
}
.cone5 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(180deg);
background: #3116f0;
}
.cone6 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(225deg);
background: #ffe300;
}
.cone7 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(270deg);
background: red;
}
.cone8 {
clip-path: polygon(50% 0, 50% 50%, 0 0);
transform: rotate(315deg);
background: #ff6225;
}
3. Animación en CSS girar 360º grados
La idea era generar un movimiento constante en la ruleta, para ello tuve que aprender sobre los tipos de transición en una animación.
.container-cone {
animation: rotate 5s infinite linear;
}
@keyframes rotate {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
Este proyectito también lo pueden encontrar en github además puedes verlo funcionar aquí.
La animación de la ruleta la hice el años 2022 pero lo estoy compartiendo este año 😅.
