2DCS/style.css at master · wind-apprentice/2DCS · 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
:root{
    --bulletLeft:300px;
    --bulletEnd:800px;
    --eggPicture:url("./img/egg.png");
}

#score {text-align:center;}

#game{
    width: 600px;
    height: 300px;
    border: 2px solid black;
    margin: auto;
    background-image:url("./img/34d7a3bbe7ab056f213e66c7182dd57e.gif") ;
    background-size: cover;
}

#shooter{
    height: 75px;/*75+225=300*/
    width: 75px;
    top: 225px; /*the distance from top*/
    position: relative;
    background-image: url("./img/shooting.png");
    background-size: cover;
    /*animation: jump 0.5s infinite;*/
}

.jump-animation{
    animation:jump 0.5s;
}

@keyframes jump{
    0%{top: 225px;}
    50%{top: 100px;}
    75%{top: 100px;}
    100%{top: 225px;}
}

.shoot-animation{

    animation:bullet 1s;
}

#bullet{
    width: 35px;
    height:35px;
    position: relative;
    top:150px;
    left:-300px;
    background-image: url(./img/bullet.png);
    background-size: cover;
    visibility: hidden;
    /*animation:bullet 1s infinite;*/
}

@keyframes bullet{
    0%{left:var(--bulletLeft);}
    100%{left:var(--bulletEnd);}
}

#egg{
    height: 70px;/*75+225=300*/
    width: 70px;
    top: 118px; /*the distance from top*/
    left:520px;
    position: relative;
    background-image:url(./img/egg.png);
    background-size: cover;
}

.egg-animation{

    animation:egg-break 2s;
}

@keyframes egg-break{
    0%{background-image:url(./img/egg.png);}
    50%{background-image:url(./img/broke_egg.png);}
    100%{background-image:url(./img/egg.png);}
}

.egg-jump{
    animation:egg-jump 0.5s;
}

@keyframes egg-jump{
    0%{top: 118px;}
    50%{top: 38px;}
    75%{top: 38px;}
    100%{top: 118px;}
}

#egg-bullet{
    width: 35px;
    height:35px;
    position: relative;
    top:0px;
    left:-300px;
    background-image: url(./img/egg-bullet.png);
    background-size: cover;
    visibility: visible;
    /*animation:bullet 1s infinite;*/
}

@keyframes egg-bullet{
    0%{left:var(--eggbulletLeft);}
    100%{left:var(--eggbulletEnd);}
}