-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
53 lines (50 loc) · 2.12 KB
/
index.html
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
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style/gradient.css" />
<link rel="stylesheet" type="text/css" href="./style/progress.css" />
<link rel="stylesheet" type="text/css" href="./style/blur.css" />
<link rel="stylesheet" type="text/css" href="./style/flash.css" />
<link rel="stylesheet" type="text/css" href="./style/progress.css" />
<link rel="stylesheet" type="text/css" href="./style/ball.css" />
<link rel="stylesheet" type="text/css" href="./style/label.css" />
<link rel="stylesheet" type="text/css" href="./style/light.css" />
<link rel="stylesheet" type="text/css" href="./style/arrow.css" />
</head>
<body>
<!-- 手写箭头 -->
<div class="arrow"></div>
<div class="background-gradient">
<div class="mask"></div>
</div>
<!-- 有色到透明的背景渐变 -->
<div class="background-gradient">
<div class="mask"></div>
</div>
<!-- 圆环进度条 -->
<div class="progress">
<div class="wrapper-circle left">
<div class="circle"></div>
</div>
<div class="wrapper-circle right">
<div class="circle"></div>
</div>
</div>
<!-- 毛玻璃 -->
<img class="blur" src="https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg" />
<img class="common-img" src="https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg" />
<!-- 球体发光 -->
<div class="light"></div>
<!-- 光影掠过 -->
<div class="flash">
<div class="flash-bar"></div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566229631562&di=3966799d654c4f9e8bc5936000ec6619&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D275377869%2C874401419%26fm%3D214%26gp%3D0.jpg" />
</div>
<!-- 一个变大变小的球体 -->
<div class="ball"></div>
<!-- 左上角标签 -->
<div class="label">
<div class="label-bar">打折</div>
<img src="https://pic1.zhimg.com/50/v2-6c5aa2304a93b7fbaf903e3560543d7b_hd.jpg" />
</div>
</body>
</html>