목록clip-path (2)

비전공자 개발일기

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
Lamp On Off Animation

body { background-color: #2598EB; } .lamp-item { position: absolute; left: 0; right: 0; margin: 0 auto; } .lamp-top { background-color: #2D2D2D; width: 10px; height: 100px; top: 0; } .lamp-middle { background-color: #2D2D2D; border-radius: 50px 50px 0 0; width: 50px; height: 30px; top: 100px; } .lamp-bottom { background-color: #2D2D2D; border-radius: 100px 100px 0 0; width: 150px; height: 80px; ..
HTML _CSS 2022. 6. 9. 00:06
이전 Prev 1 Next 다음