목록HTML _CSS (226)

비전공자 개발일기

Typing Effect

This is Typing effect .wrapper { height: 100vh; display: grid; place-items: center; } .typing-demo { width: 21ch; animation: typing 2s steps(22), blink .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 3px solid; font-family: monospace; font-size: 2em; } @keyframes typing { from { width: 0; } } @keyframes blink { 50% { border-color: transparent; } }
HTML _CSS 2022. 11. 6. 00:41
Circle Scroll

Magic Magic Magic * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 200vh; } section { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #333; } section .sec { position: absolute; width: 100%; height: 100%; z-index: 10; } section .sec.sec1 { background-color: #B0FF54; clip-path: circle(200px at 0 0); } section .sec.sec2 { background-color: #03A..
HTML _CSS 2022. 11. 5. 00:44
Hidden Search Bar

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient(90deg, #7d5fff, #7158e2); font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .search { position: relative; height: 50px; } .search .input { backgr..
HTML _CSS 2022. 11. 2. 00:01
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
Credit card

CREDITCARD debit 0000 0021 4748 3647 Valid thru 01/38 Anki(CWR) Mastercard * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,55%); font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 san..
HTML _CSS 2022. 10. 30. 18:07
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
Unfold CSS Effect

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #2F364F; } .box { width: 640px; height: 360px; display: flex; transform: rotate(-25deg) skew(25deg); transition: .5s; } .box:hover { transform: rotate(-25deg) skew(-25deg) translateY(-20px); } .box span { width: 25%; height: 100%; backgroun..
HTML _CSS 2022. 10. 27. 00:12
SOLAR Eclipse

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; height: 50vh; display: grid; place-items: center; } .circle { width: 200px; height: 200px; border-radius: 50%; background-color: #FF9540; position: relative; box-shadow: 0 0 10px #FF4500, 0 0 40px #FF4500, 0 0 80px #FF4500; } .circle::before { content: ""; position: absolute; width: 200px; height: 200px; border-r..
HTML _CSS 2022. 10. 26. 00:57
이전 Prev 1 ··· 7 8 9 10 11 12 13 ··· 29 Next 다음