WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2033
Andev.web
Abrir no Editor
Publique Seu Código
Recomendado
25 March 2025
Carregar URL
19 September 2025
Animação CSS: Movimento da Figura Burocrática
HTML
Copy
Andev Web
CSS
Copy
.graph-container { --size: 20rem; --stroke-size: calc(var(--size)/5); --rating: 0; position: relative; display: inline-flex; box-sizing: border-box; animation: 1s animateRating linear; } .graph-container *, .graph-container *::before, .graph-container *::after { box-sizing: border-box; } .half-donut { width: var(--size); height: calc(var(--size)/2); border-radius: var(--size) var(--size) 0 0; position: relative; overflow: hidden; filter: drop-shadow(0 0 0.3rem #0005); } .slice { --stroke-color: #000; --rotate: 0deg; position: absolute; width: 100%; height: 100%; border-radius: var(--size) var(--size) 0 0; border: var(--stroke-size) solid var(--stroke-color); box-sizing: border-box; border-bottom: none; transform-origin: 50% 100%; background: #0000; transform: rotate(calc(var(--rotate))); } .slice .fa-regular { font-size: 2rem; color: #000; position: absolute; left: -2.5rem; top: 2.5rem; --emo-rotate: 90deg; transform: rotate(var(--emo-rotate)); } .slice:hover { opacity: 0.8; cursor: pointer; } .slice:nth-child(1) { --stroke-color: #d72e2c; --rotate: calc(36deg * (1 - 1) ); } .slice:nth-child(1) .fa-regular { --emo-rotate: calc(-36deg * (1 - 1)); } .slice:nth-child(2) { --stroke-color: #ff6259; --rotate: calc(36deg * (2 - 1) ); } .slice:nth-child(2) .fa-regular { --emo-rotate: calc(-36deg * (2 - 1)); } .slice:nth-child(3) { --stroke-color: #f19c4b; --rotate: calc(36deg * (3 - 1) ); } .slice:nth-child(3) .fa-regular { --emo-rotate: calc(-36deg * (3 - 1)); } .slice:nth-child(4) { --stroke-color: #68ca6f; --rotate: calc(36deg * (4 - 1) ); } .slice:nth-child(4) .fa-regular { --emo-rotate: calc(-36deg * (4 - 1)); } .slice:nth-child(5) { --stroke-color: #509d55; --rotate: calc(36deg * (5 - 1) ); } .slice:nth-child(5) .fa-regular { --emo-rotate: calc(-36deg * (5 - 1)); } .marker { position: absolute; z-index: 1; transform: translateX(-50%); --round-size: calc(var(--size) / 10); --round-o-size: calc(var(--round-size)* 0.32); width: var(--round-size); height: var(--round-size); left: 50%; bottom: 0; border: var(--round-o-size) solid #fff; border-radius: 50%; --turn: calc(45deg + (36 * calc(var(--rating)* 1deg)) ); transform: translate(-50%, 50%) rotate(var(--turn)); transform-origin: 50% 50%; transition: 0.2s linear; } .marker::before { content: ""; position: absolute; border: calc(var(--round-size) / 3) solid transparent; border-right: calc(var(--size)* 0.4) solid #FFF; left: 0%; bottom: 0; transform: translate(-100%, 50%) rotate(-45deg); transform-origin: 100% 50%; filter: drop-shadow(calc(var(--round-size) / -10) 0 0.2rem #0008); } @keyframes animateRating { 50% { --rating: 5; } } #range { -webkit-appearance: none; width: 20rem; height: 0.5rem; background: #90CAF9; outline: none; opacity: 0.7; border-radius: 0.5rem; -webkit-transition: 0.2s; transition: opacity 0.2s; } #range:hover { opacity: 1; } #range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2rem; height: 2rem; border-radius: 50%; background: #2962FF; border: 0.5rem solid #FFF; cursor: pointer; } #range::-moz-range-thumb { width: 2rem; height: 2rem; background: #2962FF; cursor: pointer; } body { background: #262638; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; height: 100vh; gap: 5rem; }
JS
Copy
document.getElementById('range').addEventListener('input', e=>{ document.querySelector('.graph-container').style.setProperty('--rating', e.target.value); })