-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
109 lines (71 loc) · 3.29 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
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
109
<!--
* @Date: 2020-05-28 10:10:27
* @Author: WangYongJie
* @e-mail: [email protected]
* @LastEditTime: 2020-05-28 17:41:45
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="小东西儿,前端案例总结">
<meta name="description" content="王永杰的网络日志">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习记录</title>
<link rel="shortcut icon" href="./static/image/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./static/css/index.css">
<script src="./static/js/index.js"></script>
</head>
<body>
<div class="content_box">
<details>
<summary>1. 把图像设置为列表中的项目标记<code>(list-style-image)</code></summary>
<div class="item_des">
<p>通过自定义图片改变列表前面的样式</p>
<button><a href="./code/list-style-image/index.html" target="_blank">效果预览</a></button>
</div>
</details>
<details>
<summary>2. 进度条动效</summary>
<div class="item_des">
<p>通过背景渐变加css3动画属性使进度条动起来</p>
<button><a href="./code/progress-bar/index.html" target="_blank">效果预览</a></button>
</div>
</details>
<details>
<summary>3. 单张png图片动起来实现加载小动效</summary>
<div class="item_des">
<p>单张png图片，通过css3中animation的steps()属性实现加载小动效</p>
<button><a href="./code/loading/index.html" target="_blank">效果预览</a></button>
</div>
</details>
<details>
<summary>4. 判断图片元素是否在可视区域实现懒加载效果</summary>
<div class="item_des">
<p>基于视口的宽度判断图片是否在可视区域，实现懒加载效果(这只是简单的一个测试，还有很多问题 bug，比如必须滑动一下页面触发滚动事件才能执行)</p>
<button><a href="./code/lazy-loading/index.html" target="_blank">效果预览</a></button>
</div>
</details>
<details>
<summary>5. canvas绘制时钟(菜鸟教程)</summary>
<div class="item_des">
<p>利用canvas绘制时钟，转载于<a href="https://www.runoob.com/w3cnote/html5-canvas-intro.html" target="_blank">菜鸟教程</a></p>
<button><a href="./code/canvas-time/index.html" target="_blank">效果预览</a></button>
</div>
</details>
<details>
<summary>待定</summary>
<div class="item_des">
<p>待定</p>
<button><a href="./" target="_blank">效果预览</a></button>
</div>
</details>
</div>
<ul class="contact">
<li><a href="https://xiaodongxier.com" title="Blog" target="_blank">Blog</a></li>
<li><a href="mailto:[email protected]" title="Email" target="_blank">Email</a></li>
<li><a href="http://xiaodongxier.com/about" title="留言板" target="_blank">留言板</a></li>
</ul>
</div>
</body>
</html>