WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
carte
927
kevekıbhack
Ouvrir dans l'éditeur
Video
Publiez votre code
0
Recommandé
1 August 2024
Conception de l'interface utilisateur de la carte produit
14 June 2024
Carte animée des réseaux sociaux
31 March 2024
Carrousel de cartes JavaScript
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) */
