WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Efeito de pairar no ícone
1464
ledoc
Abrir no Editor
Publique Seu Código
Recomendado
20 June 2025
Ícones de interface do usuário do Glassmorphism Player e do aplicativo CSS
18 September 2024
Login de hacker
14 October 2025
Estrutura HTML de animação de carregamento CSS
HTML
Copy
Home
Profile
Likes
Settings
Search
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #222; --clr: #fff; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--bg); } ul { position: relative; display: flex; gap: 50px; } ul li { position: relative; list-style: none; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.5s; } ul li::before { content: &singleQuote;&singleQuote;; position: absolute; inset: 30px; box-shadow: 0 0 0 10px var(--clr), 0 0 0 20px var(--bg), 0 0 0 22px var(--clr); transition: 0.5s; } ul li:hover::before { inset: 15px; } ul li::after { content: &singleQuote;&singleQuote;; position: absolute; inset: 0; background: var(--bg); transform: rotate(45deg); transition: 0.5s; } ul li:hover::after { inset: 0px; transform: rotate(0deg); } ul li a { position: relative; text-decoration: none; z-index: 10; display: flex; justify-content: center; align-items: center; } ul li a i { font-size: 2em; transition: 0.5s; color: var(--clr); opacity: 1; } ul li:hover a i { color: var(--clr); transform: translateY(-40%); } ul li a span { position: absolute; font-family: sans-serif; color: var(--clr); opacity: 0; transition: 0.5s; transform: scale(0) translateY(200%); } ul li:hover a span { opacity: 1; transform: scale(1) translateY(100%); } ul li:hover a i, ul li a span { filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr)); }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */