목록Animation (92)

비전공자 개발일기

Circular Progress Bar

85% 90% 70% * { margin: 0; padding: 0; box-sizing: border-box; font-family: consolas; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #CFD1E1; } .container { display: flex; justify-content: center; align-items: center; gap: 80px 100px; flex-wrap: wrap; } .container .box { position: relative; width: 240px; height: 250px; display: flex; ju..
HTML _CSS 2022. 10. 17. 11:18
Cube Hover

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #25335B; min-height: 100vh; } .container { position: relative; top: -80px; transform: skewY(-20deg); animation: animate 5s linear infinite; } @keyframes animate { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } } .container .cube { z-index:..
HTML _CSS 2022. 9. 30. 07:22
Text Animation & BG

Wish u a happy T okyo D aeg u * { margin: 0; padding: 0; box-sizing: border-box; font-family: "poppins", sans-serif; } h3 { font-size: 1.5em; text-transform: uppercase; letter-spacing: 3px; font-weight: 300; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } h1 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: ..
HTML _CSS 2022. 9. 25. 09:34
Gradient Circle Text

r e p o l e v e d d n e t n o r f * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } body::before { content: ''; position: absolute; inset: 0; background: linear-gradient(#08FF12, #0791FF); z-index: 10; pointer-events: none; mix-blend-mode: multiply; } .circle { position: relative; ..
HTML _CSS 2022. 9. 15. 00:33
Colorful Glowing Liquid Bowl

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #121212; } .bowl { position: relative; width: 300px; height: 300px; background-color: rgba(255, 255, 255, .1); border-radius: 50%; border: 8px solid transparent; transform-origin: bottom center; animation: animate 5s linear infinite; } @key..
HTML _CSS 2022. 9. 9. 00:24
Rader Loading Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #333; gap: 50px; } .loader { position: relative; width: 300px; height: 300px; background-color: #333; border-radius: 50%; box-shadow: 25px 25px 75px rgba(0, 0, 0, .25), 10px 10px 70px rgba(0, 0, 0, .25); border: 2px solid #222; display: fle..
HTML _CSS 2022. 9. 7. 00:37
Wave BG Button

Button * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #0C0C0C; } a { position: relative; padding: 20px 50px; display: block; text-decoration: none; text-transform: uppercase; width: 200px; overflow: hidden; border-radius: 40px; } a span { position: relative; color: #FFF; font-size: 20px..
HTML _CSS 2022. 9. 4. 21:59
Lighting Loader

THIS is CSS's Magic * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #222; } .loader { position: relative; width: 150px; height: 150px; animation: animate 24s steps(12) infinite; } @keyframes animate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } h3 { position: absol..
HTML _CSS 2022. 9. 2. 00:23
이전 Prev 1 2 3 4 5 6 7 8 ··· 12 Next 다음