WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
carte
111
kevekıbhack
Ouvrir dans l'éditeur
Publiez votre code
Precisa de um site?
Recommandé
30 August 2024
Effet de survol de carte 3D
1 August 2024
Conception de l'interface utilisateur de la carte produit
17 May 2025
Carte à retourner moderne
HTML
Copy
<div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div> <div class="card"> <h2>CARD</h2> </div>
CSS
Copy
.card { width: 190px; height: 254px; background: #07182E; position: relative; display: flex; place-content: center; place-items: center; overflow: hidden; border-radius: 20px; } .card h2 { z-index: 1; color: white; font-size: 2em; } .card::before { content: ''; position: absolute; width: 100px; background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); height: 130%; animation: rotBGimg 3s linear infinite; transition: all 0.2s linear; } @keyframes rotBGimg { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .card::after { content: ''; position: absolute; background: #07182E; ; inset: 5px; border-radius: 15px; } /* .card:hover:before { background-image: linear-gradient(180deg, rgb(81, 255, 0), purple); animation: rotBGimg 3.5s linear infinite; } */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
