목록이모지 (3)

비전공자 개발일기

Emoji Cursor Trail Effect

realtime on display EMOJI CURSOR TRAIL EFFECT * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #111; overflow: hidden; } span { position: absolute; pointer-events: none; width: 10px; height: 10px; animation: animate 1s linear infinite; } @keyframes animate { 0% { translate: 0 0; opacity: 0; } 10% { opacity: 1; } 90% { translate: 0 100px; opacity: 1..
Javascript 2022. 12. 24. 00:59
Growing Smiley Face Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 100vh; background-color: #222; overflow: hidden; } :root { --clr1: #FF0087; --clr2: #01FF5F; } label { position: relative; width: 150px; height: 150px; } label input { appearance: none; } label .face { position: absolute; inset: 0; backgr..
HTML _CSS 2022. 9. 12. 00:32
Emoji Animation

.face { width: 100px; height: 100px; border-radius: 50%; background-color: #D8C557; box-shadow: inset -3px 0 0 4px rgba(255, 102, 0, .15); position: relative; } .eye { width: 30px; height: 30px; background-color: #FFF; border-radius: 50%; position: absolute; top: 32px; left: 12px; } .eye:last-child { left: auto; right: 12px; } .eye::after { content: ""; width: 12px; height: 12px; background-colo..
HTML _CSS 2022. 6. 12. 00:50
이전 Prev 1 Next 다음