-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
91 lines (76 loc) · 2.35 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
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
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Finger+Paint);
body {
background: linear-gradient(121deg, rgba(141, 141, 141, 0.09) 0%, rgba(141, 141, 141, 0.09) 83%,rgba(51, 51, 51, 0.09) 83%, rgba(51, 51, 51, 0.09) 100%),linear-gradient(200deg, rgba(73, 73, 73, 0.05) 0%, rgba(73, 73, 73, 0.05) 53%,rgba(145, 145, 145, 0.05) 53%, rgba(145, 145, 145, 0.05) 100%),linear-gradient(48deg, rgba(107, 107, 107, 0.06) 0%, rgba(107, 107, 107, 0.06) 99%,rgba(179, 179, 179, 0.06) 99%, rgba(179, 179, 179, 0.06) 100%),linear-gradient(321deg, rgba(100, 100, 100, 0.05) 0%, rgba(100, 100, 100, 0.05) 26%,rgba(253, 253, 253, 0.05) 26%, rgba(253, 253, 253, 0.05) 100%),linear-gradient(228deg, rgba(202, 202, 202, 0.06) 0%, rgba(202, 202, 202, 0.06) 47%,rgba(89, 89, 89, 0.06) 47%, rgba(89, 89, 89, 0.06) 100%),linear-gradient(321deg, rgba(159, 159, 159, 0.05) 0%, rgba(159, 159, 159, 0.05) 1%,rgba(17, 17, 17, 0.05) 1%, rgba(17, 17, 17, 0.05) 100%),linear-gradient(90deg, rgb(93, 68, 80),rgb(104, 219, 244));
overflow: hidden;
font-family: "Courier New", Courier, monotype;
font-size: 5vw;
text-align: center;
size: 100vh;
color: transparent;
backface-visibility: hidden;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
flex-direction: column;
}
span {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
animation: smoky 5s 3s both;
}
span:nth-child(even){
animation-name: smoky-mirror;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform:
translate3d(15rem,-8rem,0)
rotate(-40deg)
skewX(70deg)
scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke; }
to {
transform:
translate3d(18rem,-8rem,0)
rotate(-40deg)
skewX(-70deg)
scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@for $item from 1 through 21 {
span:nth-of-type(#{$item}){
animation-delay: #{(3 + ($item/10))}s;
}
}
h1 {
white-space: nowrap;
overflow: hidden;
color: rgba(255,255,255,.70);
margin: 0 auto;*/
}
/* Animation */
h1 {
animation: animated-text 4s steps(29,end) 1s 1 normal both;
animation-delay: 5s;
}
@keyframes animated-text{
from{width: 0;}
to{width: 80%;}
}