WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animação de esfera CSS com efeitos de foco
500
ByBy.inc
Abrir no Editor
Publique Seu Código
Recomendado
10 June 2025
Um código de Mete
23 August 2025
Portfólio de Designer Criativo - Alex
14 October 2025
Estrutura HTML de animação de carregamento CSS
HTML
Copy
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; body{ background: rgb(251, 247, 247); overflow-x: hidden; } } .band{ color: white; background-color: blueviolet; height: 30px ; } .band h1{ padding: 10px; font: 1em sans-serif; text-align: center; } .logo{ font-family: sans-serif; font-size: large; text-align: center; padding: 30px; } nav{ height: 80px; background-color: rgb(251, 251, 251) } .hero{ height: 400px; background-color: white; display: flex; } .hero .container{ display: flex; height: 98%; width: 100%; } .container img{ width: 100%; } .content{ align-items: center; display: flex; flex-direction: column; color: white; font-family: sans-serif; font-size: 40px; margin-top: -200px; } .content button{ height: 40px; width: 150px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background-color: white; color: black; border:none; border-radius: 3px; } .title{ display: flex; flex-direction: column; align-items: center; margin-top:130px; } .title h1{ font-family: sans-serif; font-size: 25px; margin-bottom: 50px; } .product{ background-color: rgb(255, 255, 255); border-radius: 10px; height: 320px; width: 200px; flex-direction: column; display: flex; } .product img{ height: 200px; } .product button{ height: 50px; width: 200px; background-color: rgb(51, 47, 47); color: #ffffff; border: none; } .product h2{ margin-top: 20px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 15px; margin-bottom: 20px; text-align: center; } .product p{ font-family: sans-serif; font-size: 15px; position: relative; color: rgb(0, 0, 0); left: 160px; } .product-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; } .product { margin: 10px; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */