목록Animation (92)

비전공자 개발일기

Card With Glass Effect

.card { width: 150px; height: 200px; position: relative; } .card_inner { width: inherit; height: inherit; background-color: rgba(255, 255, 255, .05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); border-radius: 8px; } .circle { width: 100px; height: 100px; background: radial-gradient(#b0e633, #53ef7d); border-radius: 50%; position: absolute; animation: move-up 2s ease-in..
HTML _CSS 2022. 5. 3. 00:27
Scanner Animation

Scanning... body { background-color: #6667ab; } .scanner h1 { color: #252839; font-size: 4rem; position: absolute; } .scanner h1:before { content: 'Scanning...'; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-right: 4px solid red; box-shadow: 0 0 10px 10px #ff0000; overflow: hidden; color: red; animation: scan 4s linear infinite; } @keyframes scan { 0%, 10%, 100% { width: 0;..
HTML _CSS 2022. 4. 30. 00:11
Love Animation

body { background-color: black; height: 100vh; display: flex; justify-content: center; align-items: center; } .love { position: relative; width: 50px; height: 50px; } p::after { position: absolute; width: 50px; height: 50px; content: "I LOVE"; font-size: 5px; font-weight: 700; top: 10px; left: 1px; transition: all .5s ease-in-out; } .love span { position: absolute; width: 30px; height: 30px; bac..
HTML _CSS 2022. 4. 29. 00:01
Endless Road Animation

body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: radial-gradient(#9bdfff, #009be4); } .infinite { position: absolute; width: 880px; height: 160px; background: #525252; transform-origin: bottom; transform-style: preserve-3d; transform: perspective(500px) rotateX(30deg); } .infinite:before { content: ''; position: absolute; t..
HTML _CSS 2022. 4. 26. 00:58
Gradient Background Animation

.animated-background { background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); background-size: 400% 400%; animation: animate-background 10s infinite ease-in-out; } @keyframes animate-background { 0% { background-position: 0 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
HTML _CSS 2022. 4. 25. 00:37
Circle Loading Tape

RESTART 100% 100% 100% * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #101010; font-family: sans-serif; } .restart { width: 250px; height: 50px; margin: 100px 831px 0; cursor: pointer; } .container { display: flex; max-width: 900px; margin: -260px auto; justify-content: space-around; align-items: center; flex-wrap: wrap; height: 100vh; padding: 20px; } .container .card {..
Javascript 2022. 4. 24. 00:46
Edge Motion

.motion { width: 200px; height: 200px; border-radius: 50%; position: relative; display: flex; justify-content: center; align-items: center; } .circle { width: 100px; height: 100px; border: 1px solid #6667ab; position: absolute; border-radius: 50%; animation: circleAnimation 2s linear infinite; } .circle::before { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%)..
HTML _CSS 2022. 4. 20. 00:43
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 ··· 7 8 9 10 11 12 Next 다음