목록HTML _CSS (226)

비전공자 개발일기

Page Scroll Effect

SCROLL * { margin: 0 ; padding: 0; } body { background-color: #111; height: 200vh; } section { position: absolute; width: 100%; height: 100%; background: #2abbff; } section p{ font-size: 100px; color: #6667ab; text-align: center; position: absolute; top: 70%; left: 39%; z-index: 3; } section .curve { width: 100%; height: 200px; position: absolute; bottom: -200px; transform-origin: top; } section..
HTML _CSS 2022. 5. 26. 00:05
FILP CARD

I'm IRONMAN! I'm IRONMAN! Tony Stark * { text-align: center; } .card { width: 200px; height: 220px; position: relative; background-color: transparent; transition: transform .8s; transform-style: preserve-3d; } .card:hover { transform: rotateY(180deg); cursor: pointer; } .front, .back { width: 100%; height: 100%; background-color: #fff; padding-top: 20px; position: absolute; border-radius: 10px; ..
HTML _CSS 2022. 5. 20. 00:49
Isometric Menu Hover Effects

Home About Services Portfolio Our Team Contact Home About Services Portfolio Our Team Contact @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Oswald', sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #434750; } ul { posit..
HTML _CSS 2022. 5. 19. 00:24
Sprite Animation

.scene { width: 230px; height: 200px; background:url('./background.jpg') 0 90% no-repeat; background-size: cover; background-size: 500% 400%; border-radius: 20%; position: relative; overflow: hidden; transition: background-position 15s linear; } .scene:hover { background-position: 150% 90%; } .mario { width: 65px; height: 100px; background: url("./mario_sprite.png") no-repeat; transform: transla..
HTML _CSS 2022. 5. 18. 00:13
Image Animation Sequence

.scene { width: 230px; height: 200px; position: relative; overflow: hidden; background-color: #2598eb; } .scene img { position: absolute; } .city { width: 100%; height: 50%; bottom: -3px; object-fit: cover; } .plane { width: 45%; top: 50px; left: -50px; animation: plane-move 15s linear forwards; } .cloud { animation: clouds-move 22s linear forwards; } .cloud-1 { width: 70px; top: 0; left: 30px; ..
HTML _CSS 2022. 5. 13. 01:07
Nine Dots Menu

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #10131c; } .navigation { position: relative; width: 70px; height: 70px; background: #212532; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: .5s; transition-delay: .8s; } .navigation...
HTML _CSS 2022. 5. 11. 00:42
3D BUTTON

Hover On Me *, *:after, *:before{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } body{ font-size:100%; padding:100px; margin:0; height:100%; } body{ font-family:Arial, sans-serif; background:#000; } .container{ height:100%; position:relative; perspective:800px; } /* General button styles */ .btn{ border:none; position:relative; background:none; padding:30px 8..
HTML _CSS 2022. 5. 9. 00:33
Floating Text

WARRIOS WARRIOS body { display: flex; background: #000; min-height: 97vh; align-items: center; justify-content: center; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .content { position: relative; } .content h2 { color: #fff; font-size: 8em; position: absolute; letter-spacing: 5px; transform: translate(-50%, -50%); } .co..
HTML _CSS 2022. 5. 7. 00:09
이전 Prev 1 ··· 20 21 22 23 24 25 26 ··· 29 Next 다음