needsmoreboxshadow.github.io/index.css at master · needsmoreboxshadow/needsmoreboxshadow.github.io · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
.bg-1 {
    background-image: url('assets/1.jpg');
    background-size: cover;
}
#box2   {
    position: relative;
    overflow: hidden;
    width:100vw;
}
#box2Canvas
{
    position: absolute;
}
#box2 > .container{
    z-index: 1;
}

html {
    overflow-x: hidden;
}

.quoteNode {
    position: absolute;
    overflow: visible;
}

.transparent-to-white {
    color: white;
    opacity: 0;
    transform: none;
    transition: all;
    transition-duration: 2s;
    animation-name: toWhite;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}
.patch, .filter-patch{
    background: black;
    position: absolute;
    overflow: visible;
    animation: 10s normal bluryMotion infinite;

}
.filter-patch{
    background: #0f08;
}
.codeContainer{
    height: 50vh;
    width:500px;
    background:#000;
}
#ProgrammContainer{
    opacity: 0.9;
}
#ProgrammEditor{
    width:100%;
    height: 100%;
    background:rgba(0,0,0,0.5);
}
@keyframes toWhite {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.boxshadow {
    box-shadow: #f00 0px 0px 1px,
    #ff7f00 3px 3px 1px,
    #ff0 6px 6px 1px,
    #0f0 9px 9px 1px,
    #96bf33 12px 12px 1px,
    #00f 15px 15px 1px,
    #4b0082 18px 18px 1px;
    animation-duration: 1s;
    animation-direction: normal;
    animation-name: boxshadowGlow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transition:1s all linear;

}
.boxshadow:focus, .boxshadow:active{
    animation-fill-mode:backwards;
}
@keyframes bluryMotion {
    0%,100%{
        filter:grayscale(0%)
    }
    50%{
        filter:grayscale(100%);
    }
}
@keyframes boxs1hadowGlow {
    0% ,100%{
        box-shadow: #f00 0px 0px 1px, #ff7f00 3px 3px 1px, #ff0 6px 6px 1px, #0f0 9px 9px 1px, #96bf33 12px 12px 1px, #00f 15px 15px 1px, #4b0082 18px 18px 1px;
    }
    14% {
        box-shadow: #ff7f00 0px 0px 1px, #ff0 3px 3px 1px, #0f0 6px 6px 1px, #96bf33 9px 9px 1px, #00f 12px 12px 1px, #4b0082 15px 15px 1px, #f00 18px 18px 1px;
    }
    28% {
        box-shadow: #ff0 0px 0px 1px, #0f0 3px 3px 1px, #96bf33 6px 6px 1px, #00f 9px 9px 1px, #4b0082 12px 12px 1px, #f00 15px 15px 1px, #ff7f00 18px 18px 1px;
    }
    42% {
        box-shadow: #0f0 0px 0px 1px, #96bf33 3px 3px 1px, #00f 6px 6px 1px, #4b0082 9px 9px 1px, #f00 12px 12px 1px, #ff7f00 15px 15px 1px, #ff0 18px 18px 1px;
    }
    57% {
        box-shadow: #96bf33 0px 0px 1px, #00f 3px 3px 1px, #4b0082 6px 6px 1px, #f00 9px 9px 1px, #ff7f00 12px 12px 1px, #ff0 15px 15px 1px, #0f0 18px 18px 1px;
    }
    71% {
        box-shadow: #00f 0px 0px 1px, #4b0082 3px 3px 1px, #f00 6px 6px 1px, #ff7f00 9px 9px 1px, #ff0 12px 12px 1px, #0f0 15px 15px 1px, #96bf33 18px 18px 1px;
    }
    85% {
        box-shadow: #4b0082 0px 0px 1px, #f00 3px 3px 1px, #ff7f00 6px 6px 1px, #ff0 9px 9px 1px, #0f0 12px 12px 1px, #96bf33 15px 15px 1px, #00f 18px 18px 1px;
    }
}

.cyber {
    background: yellow;
    padding: 2px;
    position: absolute;
    left: -100%;
    right: 100%;
}