목록Animation (92)

비전공자 개발일기

Image Distribution Effect

* { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { min-height: 100vh; overflow: hidden; background-color: #FFF; } .container { display: flex; flex-wrap: wrap; transform-style: preserve-3d; perspective: 1000px; } .container .block { width: 5vw; height: 5vw; background: url('img.jpg'); background-size: cover; background-attachment: fixed; background-position: center; t..
Javascript 2022. 12. 6. 00:37
Input Label Animation

Full Name * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(45deg, #2196F3, #FF4685); } .container { padding: 50px; background-color: #FFF; display: flex; justify-content: center; align-items: center; border-radius: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, ...
HTML _CSS 2022. 11. 28. 11:28
Rotating border

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #000; } .conic { position: relative; z-index: 0; width: 400px; height: 300px; margin: 20px; padding: 2rem; border-radius: 10px; overflow: hidden; } .conic::before { content: ""; position: absolute; z-index: -2; top: -50%; left: -50%; width:..
HTML _CSS 2022. 11. 23. 14:06
BG CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; background-color: #001F25; } .loader { position: relative; width: 300px; height: 300px; } .loader span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(calc(36deg * var(--i))); } .loader span::before { con..
HTML _CSS 2022. 11. 17. 16:58
Halloween Banner

H a l l o w e e n @import url('https://fonts.googleapis.com/css2?family=Fruktur&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Fruktur', cursive; } section { position: absolute; width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #0b061f; } .spider { position: absolute; top: 0; animation: animate..
HTML _CSS 2022. 11. 1. 10:27
3D Neon Cube

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: #222; min-height: 100vh; } .cube { position: absolute; width: 300px; height: 300px; } .cube div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(25deg); animation: animate 6s li..
HTML _CSS 2022. 10. 28. 00:21
Light 3D Cube

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #1D0035; min-height: 100vh; overflow: hidden; } section { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: perspective(700px); } .box { position: absolute; transform-style: preserve-3d; top: 125px; } .box .cube { positio..
HTML _CSS 2022. 10. 24. 00:45
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
이전 Prev 1 2 3 4 5 6 7 ··· 12 Next 다음