-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
37 lines (35 loc) · 4.74 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@charset "utf-8";
*{box-sizing: border-box;margin: 0;padding: 0;}
html{height: 100%;font-size: 1px;}
body{background-color: #2a2f37;touch-action: pan-y;color: #666666;display: flex;align-items: center;height: 100%;flex-direction: column;align-content: center;justify-content: center;/* overflow: hidden; */}
.clocksvg{margin: 0 auto;position: absolute;padding: 10rem 17rem 10rem 17rem;display: flex;flex-direction: column;justify-content:center;align-items: center;border-radius: 80rem;background: black;border: #2e2e2e solid 10rem;width: 300rem;height: 300rem;background-image: linear-gradient(45deg, #101010, #000000, #4e4e4e);box-shadow: inset #000 0rem 2rem 8rem;}
.clocksvg::before{content:"";border-radius: 83rem;background: linear-gradient(45deg, #1a1a1a, #5e5e5e);width: 304rem;height: 306rem;position: absolute;left: -12rem;top: -12rem;z-index: -1;box-shadow: 0rem 0rem 30rem #00000047, 0rem 0rem 6rem #000000;}
.clocksvg::after{content:"";position: fixed;left: 50%;transform: translateX(-50%);width: 170rem;bottom: -200px;top: -200px;display: block;background: #000;z-index: -2;border: #000000 solid 4px;background-image: linear-gradient(15deg, #000000, #222222);}
.clocksvg .box{}
.clocksvg .tit{font-weight: 700;margin: 0rem 0 10rem 0;position: relative;color: aliceblue;min-height: 43rem;display: flex;flex-wrap: wrap;align-items: center;width: 100%;justify-content: center;}
.clocksvg .tit i{font-size: 32rem;display: block;margin: 4rem 10rem 0rem 0rem;background: linear-gradient(180deg,#ffffff 12.41%,#939393 52.55%,#ffffff 89.95%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.clocksvg .tit em{font-size: 28rem;font-style: normal;text-align: center;background: linear-gradient(180deg,#ffffff 12.41%,#939393 52.55%,#ffffff 89.95%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.clocksvg .tit b{font-size: 24rem;text-align: center;margin-left: 6rem;background: linear-gradient(180deg,#ffffff 12.41%,#939393 52.55%,#ffffff 89.95%);/* background: #fdfdfd; */-webkit-background-clip: text;-webkit-text-fill-color: transparent;line-height: 1;margin-top: 3rem;}
.clocksvg .tit b::after{content:"℃";font-size: 16rem;display: inline-flex;vertical-align: super;}
.clocksvg .date{font-weight: 700;margin: 2rem 0 3rem 0;position: relative;color: #d5d5d5;display: flex;align-items: center;justify-content: center;background: linear-gradient(180deg,#ffffff 12.41%,#d1d1d1 52.55%,#959595 89.95%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.clocksvg .date b{font-size: 22rem;font-weight: 700; font-style: normal; line-height: 1;}
.clocksvg .date i{font-size: 18rem;font-weight: 700; font-style: normal; line-height: 1; margin-left: 4rem;}
.clocksvg .time{display: flex;justify-content: space-between;color: #ddd;gap: 12rem;position: relative;}
.clocksvg .circle{position: relative;width: 72rem;height: 72rem;display: flex;justify-content: center;align-items: center;}
.clocksvg .circle .nm{position: absolute;text-align: center;font-weight: 700;font-size:18rem;font-family: sans-serif;margin-top: 0rem;}
.clocksvg .circle .nm i{display: block; font-size:10rem; font-style: normal; line-height: 1;}
.clocksvg .circle .nm::after{font-size: 10rem;display: block;line-height: 1;}
.clocksvg .circle.hh .nm::after{content:"Hours";}
.clocksvg .circle.mm .nm::after{content:"Minutes";}
.clocksvg .circle.ss .nm::after{content:"Seconds";}
.clocksvg .circle svg{position: relative;width: 100%;height: 100%;transform: rotate(270deg);box-shadow: #000 0rem -1rem 12rem;border-radius: 300rem;}
.clocksvg .circle svg circle{width: 100%;height: 100%;fill: #531356;fill: transparent;stroke: rgb(255 255 255 / 30%);stroke-width: 7rem;transform: translate(0rem, 0rem);position: absolute;}
.clocksvg .circle svg .cr{stroke: var(--clr);stroke-dasharray: 200;stroke-dashoffset: 200;}
.clocksvg .circle .dot{position: absolute;width: 100%;height: 100%;text-align: center;display: flex;justify-content: center;z-index: 1;}
.clocksvg .load .dot{/* transition: all 0.3s; */}
.clocksvg .circle .dot::before{content:"";position: absolute;top: -3rem;width: 10rem;height: 10rem;background: var(--clr);border-radius: 100%;box-shadow: 0rem 0rem 30rem var(--clr) , 0rem 0rem 6rem var(--clr);}
.clocksvg .circle .ap{position: absolute;left: 50%;top: 9px;font-size: 9rem;transform: translate3d(-53%,0%, 0);}
.clocksvg .selt{margin: 14rem 10rem 0rem;width: 250rem;display: flex;justify-content: center;flex-wrap: wrap;gap: 7rem;}
.clocksvg .selt .btn{border: none;transition: transform 0.1s;background-image: linear-gradient(45deg, #282828, black);border: #343434 solid 2rem;color: #dddddd;border-radius: 100rem;font-size: 11rem;padding: 4rem 9rem;}
.clocksvg .selt .btn:active{ transform: scale(0.95);}
.test{position: absolute;top: 0;left: 0;font-size: 12rem;color: #484848;color: transparent;z-index: 10;}