목록애니메이션 (13)

비전공자 개발일기

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
CSS Background Animation Effects

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #0C192C; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .bubbles { position: relative; display: flex; } .bubbles span { position: relative; width: 30px; height: 30px; background-color: #4FC3DC; margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 10px #4FC3DC44, 0 ..
HTML _CSS 2022. 5. 30. 01:14
Animated Submit BUTTON

SUBMIT body { background: #1d1f20; } main { width: 100vw; height: 100vh; } .button { background: #2b2d2f; width: 200px; height: 80px; text-align: center; position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; cursor: pointer; border-radius: 4px; } .text { font: bold 1.25rem/1 poppins; color: #71dfbe; position: absolute; top: 50%; transform: translateY(-52%)..
Javascript 2022. 5. 10. 00:59
3D BUTTON

Hover On Me *, *:after, *:before{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ font-size:100%; padding:100px; margin:0; height:100%; } body{ font-family:Arial, sans-serif; background:#000; } .container{ height:100%; position:relative; perspective:800px; } /* General button styles */ .btn{ border:none; position:relative; background:none; padding:30px 8..
HTML _CSS 2022. 5. 9. 00:33
Neon Text Glow Animation

.container { background-color: #000; margin: 500px; text-align: center; font-size: 30px; width: 200px; height: 50px; } .fab{ color: #fff; animation: first_color .5s ease-in-out infinite alternate; } .fab:nth-child(2) { animation-name: second_color; } .far{ color: #fff; animation: third_color .5s ease-in-out infinite alternate; } @keyframes first_color { 0% { text-shadow: 0 0 10px #ff1177, 0 0 20..
HTML _CSS 2022. 5. 1. 00:55
이전 Prev 1 2 Next 다음