🏀 Jordan의 카드 애니메이션 🏀

css y html을 유니카멘테 css y html, lenguajes de programaciones sobre los cuales se fundamente la web.

Abajo te explico como utilizar este diseño en tu web o relacionados otros de tus elementos para crear una mejor experiencia de usuario.

Veamos como se ve el diseño 결승

¿Conocimiento Importantes Para el Desarrollo?

CSS/위치 상대

.card {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10000;
    transition: 0.6s;
}

CSS/위치 절대

img {
    position: absolute;
    max-width: 280px;
    left: 20px;
    top: 80px;
    transform: rotate(-35deg);
    transition: 0.5s;
}

CSS/호버 선택기

.contenedor:hover .card img {
    left: 20px;
    top: 40px;
    transition: 0.5s;
}

CSS/::의사 ELements 전후

.contenedor:hover::before {
    width: 250px;
    height: 250px;
    right: -35px;
    top: -30px;
}

Sí no conoces CSS te costará mil veces .

El código en Javascript que permite cambiar las zapatillas

Es bien sabido que javascript es el lenguaje por mucho mas usado en la web, pero para generar dinamismo esto puede servirte como un component y de esa forma te permite generar ids, enlaces dinamicos entre otras cosas para que tus compoentes sean totalmente reactivos o simplemente integrar la card a un motor de plantilla o lo que quieras hacer con ella.

Código en js

btnMorado.addEventListener("click", () => {
    document.getElementById("imagen").src = "img/awesome-shoes-violet.png";
});

Qué simplemente detecta el elemento y te permite cambiar dinamicamente la imagen previamente almacenada en el repo, o general una función para extraer estos datos desde el backend y generar ids personalizados de forma dinamica y no manual que es mi caso specific.

Este es mi correo profesional [email protected] , si me escribes te aseguro que tendrás una respuesta.

설명,

링크 알 레포: Github 레포

데모 연결: 데모

호세 A. 아마야