목록front-end (11)

비전공자 개발일기

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
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
Loading Animation

Loading Animation .loader-wrapper { width: 60px; height:60px; } .loader { box-sizing: border-box; width: 100%; height: 100%; border: 10px solid #162534; border-top-color: #4bc8eb; border-bottom-color: #f13a8f; border-radius: 50%; animation: rotate 5s linear infinite; } .loader-inner { border-top-color: #36f372; border-bottom-color: #fff; animation-duration: 2.5s; } @keyframes rotate { 0%{ transf..
HTML _CSS 2022. 4. 12. 00:27
이전 Prev 1 2 Next 다음