jQuery.Matrix/styles.css at master · wiz-kid/jQuery.Matrix · 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
.matrix {
    margin: 1em auto;
    font-family: Katakana;
    width: 450px;
    height: 288px;
    overflow: hidden;
    background: #000;
    background-image: gradient(linear, 0% 90%, 0% 100%, from(rgba(0, 255, 0, 0)), to(rgba(0, 255, 0, 0.1)));
    color: rgba(0, 255, 0, .7);
    text-shadow: rgba(255, 255, 255, .8) 0px 0px 4px;
    position: relative;
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}
@-ms-keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-ms-keyframes fall {
    from {
        top: -250px;
    }
    to {
        top: 300px;
    }
}
.matrix span {
    position: absolute;
    top: 0;

    -webkit-transform-origin: 0%;
    -webkit-transform: rotate(90deg);
    -webkit-animation-name: fall, fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-timing-function: ease-out;
    transform-origin: 0%;
    transform: rotate(90deg);
    animation-name: fall, fade;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: ease-out;

    -ms-animation-name: fall, fade;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: normal;
    -ms-animation-timing-function: ease-out;

    -moz-transform-origin: 0%;
    -moz-transform: rotate(90deg);
    -moz-animation-name: fall, fade;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-timing-function: ease-out;
    color: rgb(0, 255, 0);
    text-shadow: rgb(255, 255, 255) 0px 0px 5px;
    width: 100%;
}