WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Karte
293
kevekıbhack
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
17 May 2025
Moderne Flip-Karte
21 July 2025
UNO-Karte HTML CSS Beispiel
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) */
