filter/index.html at main · liuCodeBoy/filter · 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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#main{
				width:300px;
				height: 180px;
				position: relative;
			}
			#d1{
				width:300px;
				height: 180px;
				/* 背景图片 */
				background-image: url(./img/kkx.png);
				/* 背景图片大小 */
				background-size: auto;
				background-position: 400px 0px;
				position: absolute;
				left: 0;
				right: 0;
				z-index: 1;
				}
			#mr{
					width:300px;
					height: 180px;
					/* 背景图片 */
					background-image: url(./img/mr.png);
					/* 背景图片大小 */
					background-size: auto;
					background-position: 400px 0px;
				    animation: mr 1s steps(16) infinite;
					position: absolute;
					left: 0;
					right: 0;
					top :-40px;
				}

			@keyframes  kkx{
				from{
					background-position: 400px 0px;
				}
				to{
					background-position: 400px -2304px;
			     }
			}
			@keyframes  mr{
				from{
					background-position: 500px 0px;
				}
				to{
					background-position: 500px -3072px;
			     }
			}


			 #kkx:checked~#main>#d1{
				 animation: kkx 1s steps(12) infinite;
			 }

		</style>
	</head>
	<body>
		<input type="checkbox" name="" id="kkx" value="" hidden="hidden"/>
		<div id="main">
			<div id="d1">
			</div>
			<div id="mr">
		</div>
		</div>
		<label for="kkx">水龙弹</label>
	</body>
</html>