Analog_clock/style.css at main · GodOfCode00/Analog_clock · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
body {
    background-color: #444444;
}
.container {
    width: inherit;
    height: inherit;
    display: flex;
    background-color: #333333;
    align-items: center;
    justify-content: center;
}
@keyframes rainbow {
    0% {background-position: 0% 100%;}
    50% {background-position: 100% 200%;}
    100% {background-position: 0% 100%;}
}
@keyframes ex {
    0% {background-color: red;}
    50% {background-color: green;}
    100% {background-color: blue;}
}
@keyframes rot {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(180deg);}
    100% {transform: rotate(360deg);}
}
.bar {
    height: 5px;
    width: 100%;
    margin-top: 20px;
    background: linear-gradient(124deg,#ff2400,#e81d1d,#e8b71d,#e3e81d,#1de840,#1ddde8,#2b1de8,#dd00f3,#dd0088);
    background-size: 900% 900%;
    animation: rainbow 4s ease infinite;
}
.bhai {
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    animation: rot 4s ease infinite;
}
.clock {
    border-radius: 50%;
    box-shadow: 2px 2px 2px #999999,-2px -2px 2px #000000;
    transform-origin: 50% 50%;
}
.inside {
    border-radius: 50%;
    margin: 10px;
    box-shadow:inset 2px 2px 2px #999999,inset -2px -2px 2px #000000;
    transform-origin: 50% 50%;
}
.second {
    height: 8px;
    width: 120px;
    background-color: #ff2400;
    transform-origin: 20% 50%;
    position: absolute;
    top: 44%;
    left: 48%;
}
.minute {
    height: 9px;
    width: 150px;
    background-color: rgb(102, 255, 0);
    transform-origin: 20% 50%;
    position: absolute;
    top: 44%;
    left: 47.5%;
}
.hour {
    height: 10px;
    width: 90px;
    background-color: rgb(0, 17, 255);
    transform-origin: 20% 50%;
    position: absolute;
    top: 44%;
    left: 48.5%;
}