목록emoji (2)

비전공자 개발일기

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
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 다음