목록transform (9)

비전공자 개발일기

Wandering cube Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; background-color: #333; display: flex; justify-content: center; align-items: center; } .wandering-cubes { width: 4em; height: 4em; position: relative; margin: auto; } .wandering-cubes .cube { background-color: #229ABC; width: 2em; height: 2em; position: absolute; top: 0; left: 0; animation: wandering-cubes 1.8s ease-i..
HTML _CSS 2023. 2. 23. 20:14
Cocacola

cocacola Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus reprehenderit ex iste ea nobis, quis blanditiis amet nemo, aspernatur hic dolore commodi quia voluptatum adipisci soluta doloribus iusto, neque ipsa! Explore More * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #15..
HTML _CSS 2023. 2. 5. 00:25
Police VS Taxi

police police police police * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #355463; overflow: hidden; } .road { width: 100vw; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; transform: rotate(-15deg); } .road::before { conte..
HTML _CSS 2023. 1. 30. 00:09
Rainbow Loader

* { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(#222, #000); } .loader-inner { width: 100px; height: 60px; margin: auto; position: absolute; inset: 0; } .loader-line-wrap { animation: spin 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite; width: 100px; height: 50px; left..
HTML _CSS 2023. 1. 29. 00:48
Intro Text Animation

Avengers Assemble * { margin: 0; padding: 0; box-sizing: border-box; position: relative; } body { background: radial-gradient(#93D9F9, #0C80B5); min-height: 100vh; overflow: hidden; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70vh; background-color: rgba(0, 0, 0, .1); } section { display: flex; justify-content: center; align-items: center; min-height: ..
HTML _CSS 2023. 1. 11. 00:40
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
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
Link Hover Animation

Mac iPad iPhone * { font-size: 50px; } .list { list-style: none; text-align: center; } .link { display: inline-block; margin-block: 2px; text-decoration: none; color: #2598eb; position: relative; } .link::after { content:""; width: 100%; height: 1px; background-color: #6667ab; border-radius: 4px; position: absolute; left: 0; bottom: 0; transform: scaleX(0); transform-origin: left; transition: tr..
HTML _CSS 2022. 4. 19. 00:20
이전 Prev 1 2 Next 다음