Hola! Bienvenid@ al reto de 30 días de CSS, en este reto aprenderás o probarás tu conocimiento, ¿estás list@?
Animación de íconos, botones
- Uso de íconos de
fontawesome - Uso de
hover, transiciones
Animación de "cargando" o "loading"
- Uso de
before, after - Uso de
keyframes
Dark & Light mode
- Uso de
before, after - Uso de
input type check
Texto rotativo
- Uso de
span - Uso de
keyframes
Texto digitado
- Uso de ```transitions``
- Uso de
keyframes, animations
Texto digitado
- Uso de ```nth-child``
- Uso de
keyframes
Barra de búsqueda
- Uso de ```input type text``
- Uso de
hover
Calificación con 5 estrellas
- Uso de ```before, after``
- Uso de
input type radio - Uso de
opacity - Uso de
hover, checked
Slide, deslizador de tarjetas
- Uso de
animation-delay - Uso de
animation-play-state
Calificación con 5 estrellas e imagenes
- Uso de ```input[type="radio"]``
- Uso de
hover, checked
Tarjeta giratoria con IMGs
- Uso de ```transform-style`` (espacio 3D)
- Uso de
backface-visibility - Uso de transiciones y rotación
Tarjetas + efecto borroso
- Uso de ```filter: blur()``
- Uso de
transform: scale()
Tarjetas + animación
- Uso de
transitionytranslate
Gotas de agua
- Uso de
beforeyafter - Uso de
nth-child - Para crear formas, utiliza este link
Animación "Feliz Año Nuevo"
- Uso de
nth-child - Uso de
transform skewY(20deg);
Animación "2021 Cargando.. 2022"
- Uso de
beforeyafter - Uso de
keyframesymix-blend-mode
Animación de Tarjeta c/Botón
- Uso de
inputy:checked
Note:
element1~element2 Selects every <element2> that is preceded by a <element1>
Efecto "Revelar imagen" con Spiderman 🕸
- Uso de
beforeyafter - Para la animación, juega con los atributos
top,bottomyz-index
