목록애니메이션 (13)

비전공자 개발일기

Animated BG

* { margin: 0; padding: 0; box-sizing: border-box; } section { position: relative; height: 100vh; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; } section i { position: relative; width: 60px; height: 60px; background-color: #222; } section i:nth-child(5n+1) { animation: animate 2s linear infinite, animateBG 5s li..
HTML _CSS 2022. 10. 18. 15:31
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
CSS Animated Swipe

Swipe Next * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #28272A; } .btn { position: relative; width: 200px; height: 60px; background-color: rgba(255, 255, 255, .1); border-radius: 60px; display: flex; justify-content: center; align-items: center; color: rgba(255, 255, 255, .1); text-d..
HTML _CSS 2022. 8. 31. 00:17
Lamp Animation

body { background: rgb(0, 49, 20); background: radial-gradient(circle, rgba(0, 49, 20, 1) 10%, rgba(0, 16, 8, 1) 25%, rgba(0, 0, 0, 1) 100%); margin: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; } .lamp { height: 23rem; width: 12rem; position: relative; background: rgb(36, 154, 97); background: linear-gradient(90deg, rgba(36..
HTML _CSS 2022. 8. 27. 23:09
Glowing Ring Animation

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .container { position: relative; width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, #0005); } .container .loader { position..
HTML _CSS 2022. 8. 17. 00:32
CSS Wave

Simple CSS Waves @import url(//fonts.googleapis.com/css?family=Lato:300:400); body { margin:0; } h1 { font-family: 'Lato', sans-serif; font-weight:300; letter-spacing: 2px; font-size:48px; } p { font-family: 'Lato', sans-serif; letter-spacing: 1px; font-size:14px; color: #333333; } .header { position:relative; text-align:center; background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172..
HTML _CSS 2022. 7. 4. 00:51
Animated Hot Cup of Tea

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #607D8B; } .container { position: relative; top: 50px; } .plate { position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); width: 500px; height: 200px; background: linear-gradient(to right, #F9F9F9F9, #E7E7E7); border-radi..
HTML _CSS 2022. 6. 26. 00:41
이전 Prev 1 2 Next 다음