목록css3 (310)

비전공자 개발일기

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
Alarm Application

ALARM APP Enter the Time : SET STOP :root { --bg-prim: #12181b; --bg-sec: #383838; --clr: #fff; } body { padding: 0; margin: 0; box-sizing: border-box; background-color: var(--bg-prim); } nav { text-align: center; padding: 0 1rem; color: var(--clr); background-color: var(--bg-sec); } .container { margin: 5rem auto; background-color: var(--bg-sec); padding: 1rem; color: var(--clr); display: flex;..
Javascript 2022. 5. 2. 00:12
Neon Text Glow Animation

.container { background-color: #000; margin: 500px; text-align: center; font-size: 30px; width: 200px; height: 50px; } .fab{ color: #fff; animation: first_color .5s ease-in-out infinite alternate; } .fab:nth-child(2) { animation-name: second_color; } .far{ color: #fff; animation: third_color .5s ease-in-out infinite alternate; } @keyframes first_color { 0% { text-shadow: 0 0 10px #ff1177, 0 0 20..
HTML _CSS 2022. 5. 1. 00:55
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
Profile Card

HiroDaegu .container { width: 100vw; height: 100vh; max-width: 1280px; max-height: 800px; min-width: 1000px; min-height: 600px; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; } .border { width: 290px; height: 369px; background: transparent; border-radius: 10px; transition: border 1s; position: relative; } .border:hover { border: 1px solid #fff; } .card { width..
HTML _CSS 2022. 4. 28. 00:40
3D Card

TOKYO body { background-color: #000; } .container { display: flex; justify-content: center; align-items: center; perspective: 500px; } #card { position: relative; width: 250px; height: 350px; margin: 10%; background: url("url") center no-repeat; background-size: cover; border: 2px solid violet; border-radius: 10px; transform-style: preserve-3d; will-change: transform; transition: all .5s ease-ou..
Javascript 2022. 4. 27. 00:37
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
이전 Prev 1 ··· 34 35 36 37 38 39 Next 다음