WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1287
Andev.web
Abrir no Editor
Publique Seu Código
Precisa de um site?
Recomendado
24 June 2025
Elite Real Estate: Apartamentos, Vilas, Casas para Venda e Aluguel
26 April 2025
Um Código por lebronpaulsuarezz
12 July 2025
Efeito de brilho do cartão CSS
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Andev Web</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="feedback"> <div class="emoji"> <i class="fa-solid fa-face fa-face-angry fa-3x"></i> <i class="fa-solid fa-face fa-face-frown fa-3x"></i> <i class="fa-solid fa-face fa-face-meh fa-3x"></i> <i class="fa-solid fa-face fa-face-smile fa-3x"></i> <i class="fa-solid fa-face fa-face-laugh fa-3x"></i> </div> <div class="rating"> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-2x"></i> </div> </div> <script src="app.js"></script> </body> </html>
CSS
Copy
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ height: 100vh; display: flex; justify-content: center; align-items: center; background: #ffffff; } .feedback{ background: #fff; width: 400px; height: 200px; box-shadow: 4px 4px 0px 3px #3820a3; border-radius: 5px; position: relative; } .emoji{ width: 48px; height: 48px; border-radius: 50%; position: absolute; left: 50%; top: 20%; transform: translate(-50%); display: flex; overflow: hidden; } .emoji i{ transform: translateX(0); transition: .2s ; } .rating{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 20%; cursor: pointer; } .rating i{ color: #030011; } .rating i.active{ color: #3820a3; }
JS
Copy
const startsEl= document.querySelectorAll(".fa-star") const emojisEl= document.querySelectorAll(".fa-face") const colors= ["red", "orange", "lightblue", "lightgreen", "green"] updateRating(0) startsEl.forEach((starEl, index) => { starEl.addEventListener("click", () => updateRating(index)) }) function updateRating(index) { startsEl.forEach((starEl, idx) => { if(idx < index + 1){ starEl.classList.add("active") }else{ starEl.classList.remove("active") } }) emojisEl.forEach(emoji => { emoji.style.transform= `translateX(-${index * 48}px)` emoji.style.color= colors[index] }) }
