`来展示。
+
+```html
+
+```
+
+##
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autocomplete.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autocomplete.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2ded8934468892cb8c90080606539a59fa810d09
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autocomplete.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autofocus.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autofocus.png"
new file mode 100644
index 0000000000000000000000000000000000000000..10acd6c59707c9d7aab76d8c7db82d264d0a6a69
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-autofocus.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist-2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist-2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..84d315a163f103cec19299c62dec9a9686dd4c05
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist-2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2fc519462f08fdb51634b1e862a8a366fdbfcf65
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-datalist.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..fdccb4fb82bb5fbce06b23f8497ef8c5bc030911
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c0ee534128a09be61de46913c57277b494e71f2f
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-homework2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-color.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-color.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6da71eb0f34dcb33a4d35a72c8cde3f694aa43a2
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-color.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-date.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-date.png"
new file mode 100644
index 0000000000000000000000000000000000000000..db7b1e5ab3f4d6f477fa124d665e6800d86237b2
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-date.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email-2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email-2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..aa9bbc3eb21e4ce20ca5cf6dee02366677a63b25
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email-2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8ae473dcd809d05667397dfb560f0dfe9488061c
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-input-email.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-novalidate.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-novalidate.png"
new file mode 100644
index 0000000000000000000000000000000000000000..59a80fe8c01d9356e72c0aaccc88f617bc0eb3ed
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-novalidate.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-placeholder-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-placeholder-01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0519b93543ccf9f1e4f5635a0789fd7dac0d17c3
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-placeholder-01.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-required.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-required.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b143f239ce9a547a497a0971073cd5651e2ec2a8
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/courseware/images/13-required.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/07-input-color.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/07-input-color.html"
new file mode 100644
index 0000000000000000000000000000000000000000..da120f6a3cb033b6496c3e6732200abcd6022b2b
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/07-input-color.html"
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
Document
+
+
+
+ 你喜欢的颜色:
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/08-input-date.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/08-input-date.html"
new file mode 100644
index 0000000000000000000000000000000000000000..49b8fed7aa06d99fc7465e5acdf3f09dc38bfa9b
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/08-input-date.html"
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+ 生日: 获取值
+
+
+ 当前时间: 获取值
+
+
+ 事件发生的具体时间: 获取值
+
+
+ 选择时间: 获取值
+
+
+ 出生年月: 获取值
+
+
+ 当前是今年的第几周: 获取值
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/09-input-range.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/09-input-range.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0d9ad3a4c76d9d3a3b44db25b5dc200ebf95428e
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/09-input-range.html"
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/10-input-number.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/10-input-number.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7483531c26b8994a5a1b117b71bce5cb5950c7ed
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/10-input-number.html"
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
Document
+
+
+
+
简单的数字输入框
+
+
+
+
设置了范围的数字输入框
+
+
+
+
改变步长
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/11-mobile.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/11-mobile.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6e4ffeb18391bc858328a12590e9c01533d5c21e
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/11-mobile.html"
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+ 我是普通文本输入框
+
+
+
+ 日期类型
+
+ 生日: 获取值
+
+
+ 当前时间: 获取值
+
+
+ 事件发生的具体时间: 获取值
+
+
+ 选择时间: 获取值
+
+
+ 出生年月: 获取值
+
+
+ 当前是今年的第几周: 获取值
+
+
+
+ 其它
+
+ 你喜欢的颜色:
+ 获取值
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/audio/happynewyear.mp3" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/audio/happynewyear.mp3"
new file mode 100644
index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/audio/happynewyear.mp3" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/demo.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8dba5250faefda05ac46ba9c15785724e790a606
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/demo.html"
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
点击屏幕 开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_disc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_disc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_disc.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_pointer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_pointer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/music_pointer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_lantern.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_lantern.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_lantern.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_minxi.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_minxi.png"
new file mode 100644
index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p1_minxi.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_2022.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_2022.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_2022.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_inner.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_inner.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_inner.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_middle.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_middle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_middle.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_outer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_outer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p2_circle_outer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_blessing.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_blessing.png"
new file mode 100644
index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_blessing.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_first.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_first.png"
new file mode 100644
index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_first.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_second.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_second.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_couplet_second.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_title2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_title2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/p3_title2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/title.psd" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/title.psd"
new file mode 100644
index 0000000000000000000000000000000000000000..522229feb30b25d0828f9fa940e431549aaa60eb
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/images/title.psd" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9768bab412e4c0f1de2263adf16dc35a530f3a24
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.html"
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
点击屏幕 开启开运2022
+
+
软工学院新年特献
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..1e2eb693afd6bd2dd07c2b0685466d6c0ca79916
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/index.js"
@@ -0,0 +1,44 @@
+window.addEventListener('DOMContentLoaded', function() {
+ let music = document.getElementById('music');
+ let audio = document.querySelector('audio');
+
+ let page1 = document.getElementById('page1');
+ let page2 = document.getElementById('page2');
+ let page3 = document.getElementById('page3');
+ // 兼容谷歌浏览器不能自动播放的问题
+ if (audio.paused) {
+ music.style.animationPlayState = 'paused';
+ } else {
+ music.style.animationPlayState = 'running';
+ }
+ // 点击音乐图标,控制音乐播放器效果
+ music.ontouchstart = function() {
+ if (audio.paused) {
+ audio.play()
+ // 当音乐停止后,会将play这个类移除掉,所以当音乐再次点击播放时,需要将这个类加上。
+ music.classList.add('play');
+ music.style.animationPlayState = 'running';
+ } else {
+ audio.pause()
+ music.style.animationPlayState = 'paused';
+ }
+ }
+ // 当音乐播放结束后,自动停止光盘旋转效果
+ audio.addEventListener('ended', function() {
+ music.classList.remove('play');
+ });
+
+ // 显示翻页效果
+ page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+ page3.style.display = 'block';
+ page3.style.top = '100%';
+
+ // 设置计时器,当第二个页面动画运行结束后,直接跳转到第三个页面
+ setTimeout(() => {
+ page2.classList.add('fade-out');
+ page3.classList.add('fade-in')
+ }, 5500);
+ })
+})
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/style.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/style.css"
new file mode 100644
index 0000000000000000000000000000000000000000..e1ae2f9a62739bdb6e2e87300ce75879d2f47bb8
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_13/example/style.css"
@@ -0,0 +1,321 @@
+/* 通用设置 */
+* {
+ margin: 0;
+ padding: 0;
+}
+:root {
+ font-size: 1.526vw;
+ font-family: 'Microsoft Yahei';
+}
+html,body {
+ height: 100%;
+}
+/* 音乐盒子 */
+.music {
+ position: fixed;
+ top: 3vh;
+ right: 4vw;
+ width: 15vw;
+ height: 15vw;
+ border: 4px solid #ef1635;
+ border-radius: 50%;
+ background-color: #fff;
+ z-index: 2;
+}
+.music > img:first-of-type {
+ position: absolute;
+ top: 24%;
+ right: 2.5%;
+ width: 28.426%;
+ z-index: 1;
+}
+.music > img:last-of-type {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ width: 79%;
+}
+.music > img.play {
+ animation: music_disc 4s linear infinite;
+}
+@keyframes music_disc {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+/* 背景设置 */
+.page {
+ position: absolute;
+ width: 100vw;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+.page > .bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
+/* 第一个页面 */
+#page1 {
+ display: block;
+}
+#page1 .bg {
+ background-image: url(./images/p1_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page1 > .p1-denglong {
+ position: absolute;
+ top: -3.1%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 45vw;
+ height: 71.2vh;
+ font-size: 3.506rem;
+ background: url(./images/p1_lantern.png) no-repeat center bottom;
+ background-size: 100%;
+ padding-top: 31vh;
+ box-sizing: border-box;
+ text-align: center;
+}
+#page1 > .p1-denglong::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ z-index: -1;
+ width: 30vw;
+ height: 30vw;
+ background-color: #d60b3b;
+ opacity: 0.5;
+ box-shadow: 0 0 10vw 10vw #d60b3b;
+ border-radius: 50%;
+ /* 添加动画效果 */
+ animation: p1_lantern .5s infinite alternate;
+}
+@keyframes p1_lantern {
+ 0% {
+ opacity: 0.5;
+ transform: scale(0.8, 0.8);
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+#page1 > .p1-icon {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 9vh;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 10vh;
+ margin: auto;
+}
+#page1 > .p1-words {
+ font-size: 2.134rem;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 48px;
+ text-align: center;
+}
+
+/* 第二个页面 */
+#page2 {
+ display: none;
+ transition: all 0.5s;
+}
+#page2.fade-out {
+ opacity: .3;
+ transform: translate(0, -100%);
+}
+#page2 > .bg {
+ background-image: url(./images/p2_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page2 > .p2-bg-loading {
+ z-index: 4;
+ background-color: #ef1639;
+ animation: p2_bg_loading 1s linear forwards;
+}
+@keyframes p2_bg_loading {
+ 0% {opacity: 1;}
+ 100% {opacity: 0;}
+}
+#page2 > .p2-circle {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_outer.png) no-repeat center center;
+ background-size: 100%;
+ width: 60vw;
+ height: 60vw;
+ /* 添加动画 */
+ animation: p2_circle_outer 1s linear 3s infinite;
+}
+@keyframes p2_circle_outer {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+#page2 > .p2-circle::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_middle.png) no-repeat center center;
+ background-size: 100%;
+ width: 46vw;
+ height: 46vw;
+ /* 添加动画 */
+ animation: p2_circle_middle 1s linear 2s infinite;
+}
+@keyframes p2_circle_middle {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(720deg);
+ }
+}
+#page2 > .p2-circle::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_inner.png) no-repeat center center;
+ background-size: 100%;
+ width: 40vw;
+ height: 40vw;
+ /* 添加动画 */
+ animation: p2_circle_inner 1s linear 1s infinite;
+}
+
+@keyframes p2_circle_inner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-1080deg);
+ }
+}
+#page2 > .p2-year {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_2022.png) no-repeat center center;
+ background-size: 100%;
+ width: 35vw;
+ height: 35vw;
+}
+
+/* 第三个页面 */
+#page3 {
+ display: none;
+ transition: all 0.5s;
+}
+#page3.fade-in {
+ transform: translate(0, -100%);
+}
+#page3 > .bg {
+ background-image: url(./images/p3_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page3 > .p3-logo {
+ width: 50vw;
+ height: 6vh;
+ position: absolute;
+ top: 8vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-title {
+ width: 48vw;
+ height: 50vh;
+ position: absolute;
+ top: 21vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p3_title2.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-second {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ left: 3.75vw;
+ background: url(./images/p3_couplet_second.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 .p3-first {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ right: 3.75vw;
+ background: url(./images/p3_couplet_first.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-fu {
+ width: 35vw;
+ height: 35vw;
+ position: absolute;
+ bottom: 5vh;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ background: url(./images/p3_blessing.png) no-repeat center center;
+ background-size: 100%;
+ border-radius: 50%;
+ animation: p3_blessing 2s linear infinite;
+}
+@keyframes p3_blessing {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.css"
new file mode 100644
index 0000000000000000000000000000000000000000..f568c778d544b298ac05e33bf3a2423e6fa17b3d
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.css"
@@ -0,0 +1,329 @@
+* {
+ padding: 0;
+ margin: 0;
+}
+
+html,
+body {
+ width: 100%;
+ height: 100%;
+ font-size: 1.526vw;
+}
+
+.page {
+ width: 100%;
+ height: 100%;
+}
+
+.music {
+ position: fixed;
+ top: 2vw;
+ right: 4vw;
+ width: 16vw;
+ height: 16vw;
+ border-radius: 50%;
+ border: 4px solid #ef1635;
+ background-color: white;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 2;
+}
+
+.music img:nth-of-type(1) {
+ position: fixed;
+ width: 14vw;
+ height: 14vw;
+}
+
+.music img:nth-of-type(2) {
+ position: fixed;
+ top: 4.1vw;
+ right: 6vw;
+ width: 5vw;
+ height: 10vw;
+}
+
+.play {
+ animation: music_disc 4s linear infinite;
+}
+
+@keyframes music_disc {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+
+/* 第一页 */
+
+#page1 {
+ position: relative;
+}
+
+#page1>.bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: url(./images/p1_bg.jpg) no-repeat center center;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ box-sizing: 100%;
+}
+
+#page1>.p1-lantern {
+ background: url(./images/p1_lantern.png) no-repeat center center;
+ position: absolute;
+ top: 0%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 45vw;
+ height: 71.2vh;
+ background-size: 100% 100%;
+ box-sizing: border-box;
+ text-align: center;
+ font-size: 3.506rem;
+ padding-top: 29vh;
+}
+
+#page1>.p1-lantern::before {
+ content: "";
+ position: absolute;
+ top: -5%;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ z-index: -1;
+ width: 30vw;
+ height: 30vw;
+ background-color: #d60b3b;
+ opacity: 0.5;
+ box-shadow: 0 0 12vw 12vw #d60b3b;
+ border-radius: 50%;
+ animation: lantern 0.5s infinite alternate;
+}
+
+#page1>.p1-logo {
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 10vh;
+ position: absolute;
+ bottom: 10vh;
+ left: 25vw;
+}
+
+#page1>.p1-text {
+ font-size: 3.134rem;
+ position: absolute;
+ bottom: 8vh;
+ left: 32vw;
+ color: red;
+ background: -webkit-linear-gradient(red, pink);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+
+@keyframes lantern {
+ from {
+ opacity: 0.5;
+ /* scale可以让动画实现缩放效果 */
+ transform: scale(0.8, 0.8);
+ }
+ to {
+ opacity: 0.8;
+ }
+}
+
+
+/* 第二页 */
+
+#page2 {
+ display: none;
+ transition: all 0.5s;
+ position: relative;
+ z-index: -2;
+}
+
+#page2.fade-out {
+ opacity: 0.3;
+ transform: translate(0, -100%);
+}
+
+#page2>.bg {
+ background-image: url(./images/p2_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+ width: 100%;
+ height: 100%;
+}
+
+#page2>.p2-bg-loading {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_middle.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 50vw;
+ animation: p2_circle_middle 1s linear 2s infinite;
+}
+
+#page2>.p2-cirle {
+ width: 65vw;
+ height: 65vw;
+ border-radius: 50%;
+ background: url(./images/p2_circle_outer.png) no-repeat center center;
+ background-size: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ animation: p2_circle_outer 1s linear 3s infinite;
+}
+
+#page2>.p2-cirle::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_inner.png) no-repeat center center;
+ background-size: 100%;
+ width: 40vw;
+ height: 40vw;
+ animation: p2_circle_inner 1s linear 1s infinite;
+}
+
+#page2>.p2-cirle::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_2022.png) no-repeat center center;
+ background-size: 100%;
+ width: 35vw;
+ height: 35vw;
+}
+
+@keyframes p2_circle_outer {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+
+@keyframes p2_circle_middle {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(720deg);
+ }
+}
+
+@keyframes p2_circle_inner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-1080deg);
+ }
+}
+
+
+/* 第三页 */
+
+#page3 {
+ display: none;
+ position: relative;
+ transition: all 0.5s;
+ z-index: -1;
+}
+
+#page3.fade-in {
+ transform: translate(0, -100%);
+}
+
+#page3>.bg {
+ background: url(./images/p3_bg.jpg) no-repeat center center;
+ width: 100%;
+ height: 100%;
+ background-size: 100%;
+}
+
+#page3>.p3-couplet-first {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ right: 3.75vw;
+ background: url(./images/p3_couplet_first.png) no-repeat center center;
+ background-size: 100%;
+}
+
+#page3>.p3-couplet-second {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ left: 3.75vw;
+ background: url(./images/p3_couplet_second.png) no-repeat center center;
+ background-size: 100%;
+}
+
+#page3>.p3-blessing {
+ width: 35vw;
+ height: 35vw;
+ position: absolute;
+ bottom: 5vh;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ background: url(./images/p3_blessing.png) no-repeat center center;
+ background-size: 100%;
+ border-radius: 50%;
+ animation: p3_blessing 2s linear infinite;
+}
+
+#page3>.p3-title2 {
+ width: 48vw;
+ height: 50vh;
+ position: absolute;
+ top: 21vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p3_title2.png) no-repeat center center;
+ background-size: 100%;
+}
+
+@keyframes p3_blessing {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.js"
new file mode 100644
index 0000000000000000000000000000000000000000..2f0b364a31f69e09e00f332ef2abf3e336613467
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/1.js"
@@ -0,0 +1,45 @@
+window.addEventListener('DOMContentLoaded', function() {
+
+ let music = document.getElementById('music');
+ let audio = document.querySelector('audio');
+ console.log(music);
+ let lantern = document.querySelector(".p1-lantern")
+ let page1 = document.getElementById("page1")
+ let page2 = document.getElementById('page2');
+ let page3 = document.getElementById('page3');
+ // 兼容谷歌浏览器不能自动播放的问题
+ if (audio.paused) {
+ music.style.animationPlayState = 'paused';
+ } else {
+ music.style.animationPlayState = 'running';
+ }
+ // 点击音乐图标,控制音乐播放器效果
+ music.addEventListener("touchstart", function() {
+ if (audio.paused) {
+ audio.play();
+ // 当音乐停止后,会将play这个类移除掉,所以当音乐再次点击播放时,需要将这个类加上。
+ music.classList.add('play');
+ music.style.animationPlayState = 'running';
+ } else {
+ audio.pause()
+ music.style.animationPlayState = 'paused';
+ }
+ })
+ // 当音乐播放结束后,自动停止光盘旋转效果
+ audio.addEventListener('ended', function() {
+ music.classList.remove('play');
+ });
+
+ // 显示翻页效果
+ lantern.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+ page3.style.display = 'block';
+
+ // 设置计时器,当第二个页面动画运行结束后,直接跳转到第三个页面
+ setTimeout(() => {
+ page2.classList.add('fade-out');
+ page3.classList.add('fade-in')
+ }, 5500);
+ })
+})
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/audio/happynewyear.mp3" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/audio/happynewyear.mp3"
new file mode 100644
index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/audio/happynewyear.mp3" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..98c81cd5d34ec12976567feac576d0c2645173d9
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/demo01.html"
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
点击屏幕 开启开运2022
+
+
帅哥祝你新年快乐
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_disc.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/music_pointer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_imooc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_imooc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d12211656f27f5b290478f995bb394c526227db7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_imooc.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_lantern.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png"
new file mode 100644
index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p1_minxi.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2016.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2016.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a6d88a829e76d3d5e8e0d8d85a7f6164a1b6b2d7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2016.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_2022.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_inner.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_middle.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p2_circle_outer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png"
new file mode 100644
index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_blessing.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png"
new file mode 100644
index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_first.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_couplet_second.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_logo.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8391ca83706cc3bb1ed76f18df9efd26fd61c01f
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_logo.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title.png"
new file mode 100644
index 0000000000000000000000000000000000000000..571933318cdadab50b392c5a8f3d6fa934cd7c24
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/p3_title2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/title.psd" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/title.psd"
new file mode 100644
index 0000000000000000000000000000000000000000..522229feb30b25d0828f9fa940e431549aaa60eb
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/title.psd" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4b62575cc736d45955da15c2deca88001caf65f7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_14/\346\226\260\346\230\245\350\264\272\345\215\241/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/18-CSS\346\225\210\346\236\234.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/18-CSS\346\225\210\346\236\234.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0beda3c60f28c2083830d8ba0e6099798257e8e8
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/18-CSS\346\225\210\346\236\234.md"
@@ -0,0 +1,348 @@
+# CSS效果
+
+## 本节目的
+
+作为一名web开发者,css 是必备技能之一。本次课程我们介绍一下一些常用的css小样式。
+
+## 1. 静态样式修改
+
+### 1.1 清除默认样式
+
+**重置** reset.css
+
+```css
+html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
+header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
+table{border-collapse:collapse;border-spacing:0;}
+caption,th{text-align:left;font-weight:normal;}
+html,body,fieldset,img,iframe,abbr{border:0;}
+i,cite,em,var,address,dfn{font-style:normal;}
+[hidefocus],summary{outline:0;}
+li{list-style:none;}
+h1,h2,h3,h4,h5,h6,small{font-size:100%;}
+sup,sub{font-size:83%;}
+pre,code,kbd,samp{font-family:inherit;}
+q:before,q:after{content:none;}
+textarea{overflow:auto;resize:none;}
+label,summary{cursor:default;}
+a,button{cursor:pointer;}
+h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
+del,ins,u,s,a,a:hover{text-decoration:none;}
+body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
+body{background:#fff;}
+a,a:hover{color:#333;}
+```
+
+### 1.2 三角形
+
+我们使用边框来绘制三角形:
+
+```css
+.triangle {
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 0 50px 100px 50px;
+ border-color: transparent transparent #00adb5 transparent;
+}
+```
+
+### 1.3 滚动条样式
+
+```css
+.scroll-container {
+ height: 250px;
+ border: 1px solid #ddd;
+ padding: 15px;
+ overflow: auto;
+}
+.scroll-container::-webkit-scrollbar {
+ width: 8px;
+ background: white;
+}
+.scroll-container::-webkit-scrollbar-corner,/* 动条角落 /
+.scroll-container::-webkit-scrollbar-thumb,
+.scroll-container::-webkit-scrollbar-track {
+ border-radius: 4px;
+}
+.scroll-container::-webkit-scrollbar-corner,
+.scroll-container::-webkit-scrollbar-track {
+/* 滚动条轨道 */
+ background-color: rgba(180, 160, 120, 0.1);
+ box-shadow: 0 0 1px rgba(180, 160, 120, 0.5) inset;
+}
+.scroll-container::-webkit-scrollbar-thumb {
+ /* 滚动条手柄 */
+ background-color: #00adb5;
+}
+```
+
+## 2. 动态样式
+
+### 2.1 提示气泡
+
+
+
+当鼠标移动到元素上时,弹出和提示气泡。
+
+```html
+
气泡提示
+```
+
+```css
+:root {
+ /* 定义气泡弹出框背景色 */
+ --poptipBg: #30363d;
+ /* 弹出框字体颜色 */
+ --color: #fff;
+ /* 弹出框三角形边长 */
+ --triangle: 8px;
+ /* 弹出框与元素的偏移 */
+ --distance: -12px;
+}
+.poptip {
+ position: relative;
+ z-index: 101;
+}
+.poptip::before,
+.poptip::after {
+ visibility: hidden;
+ opacity: 0;
+ transform: translate3d(0, 0, 0);
+ transition: all 0.3s ease 0.2s;
+ box-sizing: border-box;
+ }
+.poptip::before {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+ border-color: var(--poptipBg) transparent transparent transparent;
+ left: calc(50% - var(--triangle));
+ top: 0px;
+ transform: translateX(0%) translateY(var(--distance));
+ }
+
+.poptip::after {
+ font-size: 14px;
+ color: var(--color);
+ /* 内容为标签内的属性值 */
+ content: attr(aria-controls);
+ position: absolute;
+ padding: 6px 12px;
+ white-space: nowrap;
+ z-index: -1;
+ left: 50%;
+ bottom: 100%;
+ transform: translateX(-50%) translateY(var(--distance));
+ background: var(--poptipBg);
+ line-height: 1;
+ border-radius: 2px;
+ }
+.poptip:hover::before,
+.poptip:hover::after {
+ visibility: visible;
+ opacity: 1;
+}
+
+.btn {
+ width: 100px;
+ line-height: 1.5;
+ padding: 5px 10px;
+ color: #fff;
+ background: #00adb5;
+ border-radius: 4px;
+ text-align: center;
+ cursor: pointer;
+ margin: 200px auto;
+}
+```
+
+### 2.2 手风琴
+
+
+
+```html
+
+```
+
+```css
+.accordion-container {
+ overflow: hidden;
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+}
+.accordion-container > .accordion-item {
+ list-style: none;
+ height: 500px;
+ transition: width 0.5s;
+ background-repeat: no-repeat;
+ background-size: 500px;
+ background-position: center center;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.accordion-container > .accordion-item:not(:hover) {
+ width: 20%;
+}
+.accordion-container > .accordion-item:hover {
+ width: 281.20px;
+}
+.accordion-container > .accordion-item > .accordion-title {
+ color: #fff;
+ font-size: 18px;
+ z-index: 2;
+}
+```
+
+### 2.3 加载效果
+
+#### 2.3.1 围绕一个圆轨道转
+
+
+
+```html
+
+```
+
+```css
+.load {
+ width: 50px;
+ height: 50px;
+ margin: 0 auto;
+ position: relative;
+ border-radius: 50%;
+ overflow: hidden;
+ background-color: rgba(0, 169, 178,.2);
+}
+.load::before {
+ content: "";
+ width: 50px;
+ height: 50px;
+ background-color: #00adb5;
+ position: absolute;
+ left: 50%;
+ bottom: 50%;
+ z-index: 1;
+ transform-origin: left bottom;
+ animation: rotate 1.5s infinite linear;
+}
+.load::after {
+ content: "";
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+ background-color: #fff;
+ z-index: 2;
+ border-radius: 50%;
+}
+@keyframes rotate {
+ 0% {
+ transform: rotate(0);
+ }
+ 50% {
+ transform: rotate(180deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+```
+
+> 原理:
+>
+> 绘制一个同心圆,然后控制一个有背景色的矩形旋转。根据层级的关系来展示。
+
+#### 2.3.2 声浪效果
+
+
+
+```html
+
+```
+
+```css
+.load-container {
+ height: 150px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.load-container .container{
+ width: 50px;
+ height: 60px;
+ text-align: center;
+ font-size: 10px;
+}
+.boxLoading {
+ background-color: #00adb5;
+ height: 100%;
+ width: 6px;
+ display: inline-block;
+ animation: stretchdelay 1.2s infinite ease-in-out;
+}
+.boxLoading2 {
+ animation-delay: -1.1s;
+}
+.boxLoading3 {
+ animation-delay: -1.0s;
+}
+.boxLoading4 {
+ animation-delay: -0.9s;
+}
+.boxLoading5 {
+ animation-delay: -0.8s;
+}
+
+@-webkit-keyframes stretchdelay {
+ 0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
+ 20% { -webkit-transform: scaleY(1.0) }
+}
+@keyframes stretchdelay {
+ 0%, 40%, 100% {
+ transform: scaleY(0.4);
+ -webkit-transform: scaleY(0.4);
+ }
+ 20% {
+ transform: scaleY(1.0);
+ -webkit-transform: scaleY(1.0);
+ }
+}
+```
+
+> 上面代码`animation-delay`的值为负值,为什么这么设置?
+>
+> 取负值的效果:
+>
+> 1. 动画会立即开始执行
+> 2. 开始的位置是动画的其中一个阶段
+>
+> animation-delay为正数时,动画就要延时开始,我们看到的动画就是从第一帧开始的;animation-delay为负数的时候,意味着动画是提前开始的,animation-time已经开始计算了,我们看到的动画是从某一帧开始的。
+
+
+
+## 作业
+
+1. 提示气泡优化,实现左边提示,右边提示,下面提示
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/15-\346\241\210\344\276\213\345\256\236\350\267\265-\346\240\267\345\274\217\345\210\206\346\236\220.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/15-\346\241\210\344\276\213\345\256\236\350\267\265-\346\240\267\345\274\217\345\210\206\346\236\220.md"
new file mode 100644
index 0000000000000000000000000000000000000000..79a553d96b6670991796956b86c1d8149fe93297
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/15-\346\241\210\344\276\213\345\256\236\350\267\265-\346\240\267\345\274\217\345\210\206\346\236\220.md"
@@ -0,0 +1,428 @@
+# 案例分析——样式
+
+## 1. 全局样式
+
+- 我们先使用通配符选择器,将浏览器默认添加的内外边距的值清除。
+
+ ```css
+ * {
+ margin: 0;
+ padding: 0;
+ }
+ ```
+
+- 因为是响应式的页面,页面中的字体还有图片大小会随着设置尺寸不一样而有变化。所以在长度单位上的选择,我们使用`rem`,`vw`,`vh`来设置。
+
+- 根据设计稿(暂时找不到素材),我们可以计算出,字体大小和设计稿宽度的比例:1.526vw。
+
+ ```css
+ html {
+ font-size: 1.526vw;
+ font-family: 'Microsoft YaHei';
+ }
+ ```
+
+- 页面高度。我们发现,我们的body的高度就是我们内容的高度。当我们想要让body撑满我们的可视窗口的时候。我们需要将它的高度设置为`100%`。
+
+ ```css
+ body {
+ height: 100%;
+ }
+ ```
+
+ 只是设置这个效果的时候,会发现body的高度仍旧是内容的高度。这是因为,在HTML5页面中,html,body等标签,被当作了块元素处理。即宽度撑满,高度由内容填充。body设置高度`100%`时,其实是获取HTML高度的`100%`。但因为HTML的高度也是由内容决定的,所以单独设置没有效果。
+
+ 应该给html和body都设置高度100%;html高度设置100%,继承了浏览器的高度。
+
+ ```css
+ html,
+ body {
+ height: 100%;
+ }
+ ```
+
+## 2. 音乐播放器
+
+查看音乐播放器,查看素材,我们可以看到音乐播放器只有两张图片。
+
+
+
+而我们的效果图如下:
+
+
+
+具体分析:
+
+- 从定位分析:我们的这个音乐盒子一直固定在页面的右上角。所以我们使用绝对定位。左右边距:
+
+ ```css
+ #music {
+ position: fixed;
+ top: 3vh;
+ right: 4vw;
+ }
+ ```
+
+- 根据设计稿,我们这个音乐盒子的大小:
+
+ > 宽:15vw;
+ >
+ > 高:15vw;
+ >
+ > 圆角:50%;
+ >
+ > 边框:宽度4px,颜色#ef1635,样式:实线;
+ >
+ > 背景色:白色
+
+- **指针**:
+
+ 作为盒子的第一个子元素,我们的css选择器使用`#music > img:first-of-type `。
+
+ 指针是贴着边框展示的。所以我们用绝对定位要布局。
+
+ ```css
+ #music > img:first-of-type {
+ position: absolute;
+ top: 24%;
+ right: 2.5%;
+ width: 28.426%;
+ }
+ ```
+
+ > 这些定位信息,是通过设计稿计算出来的。
+
+- **磁盘:**
+
+ 磁盘我们可以看到在盒子的正中间。大小通过设计稿的值计算,可以得出`width:79%;`
+
+ 要让我们的磁盘垂直居中,有如下三种方法:
+
+ - flex布局:直接写在`#music`元素上
+
+ ```css
+ #music {
+ display: flex;
+ /* 控制元素水平居中 */
+ justify-content: center;
+ /* 控制元素垂直居中 */
+ align-items: center;
+ }
+ ```
+
+ - absolute + transform
+
+ 磁盘元素作为最后一个子元素
+
+ ```css
+ #music > img:last-of-type {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ }
+ ```
+
+ 因为后续我们要将磁盘转动起来,我们需要使用`transform: rotate()`属性。这个时候,`transform`属性的状态值由`translate()`转变为`rotate()`。产生的效果不是我们预期的。
+
+ **所以:这种方式在这里不适用。**
+
+ - absolute + margin: auto
+
+ 这是一个新的垂直居中的写法。即将`top`, `right`, `bottom`, `left`的值都设置了,然后`margin: auto`也可以设置水平垂直居中。
+
+ ```css
+ #music > img:last-of-type {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ }
+ ```
+
+ > 这个方式,是我的例子里使用的方法。
+
+
+## 3. 第一页
+
+第一页,我们先设置页面的大小。因为我们的内容分三屏展示,所以我们定义的每一页大小都应该撑满我们的可视窗口。
+
+```css
+.page {
+ width: 100%;
+ height: 100%;
+}
+```
+
+- 背景图
+
+ 我们给每个页面里面添加了一个div来放置背景图片,为了不让背景图片影像我页面上的其他元素,我们将背景图片设置为绝对定位。对此,我们要将page先设置为相对定位。
+
+ ```css
+ .page {
+ position: relative;
+ }
+ .bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ ```
+
+ 然后针对每个页面,使用自己独立的背景图。
+
+ ```css
+ #page1 > .bg{
+ background: url(./images/p1_bg.jpg) no-repeat center center;
+ background-size: 100%;
+ }
+ ```
+
+ > 对背景图片的设置,我们可以拆分写属性,并将这些属性都一起设置在.bg选择器里面。
+ >
+ > ```css
+ > .bg {
+ > background-repeat: no-repeat;
+ > background-position: center center;
+ > background-size; 100%;
+ > }
+ > #page1 > .bg {
+ > background-image: url(./images/p1_bg.jpg);
+ > }
+ > ```
+
+- **页面中灯笼**
+
+ 灯笼,我们在结构分析时,我们已经预设要用背景图片来加载这个图片。经过测量我们发现灯笼图片的高度中点位置并不是在灯笼重点圆圈的中心位置,为了不影响我们到时文本居中效果。所以为了之后我们处理图片和闪烁的红圈,我们扩大图片的大小为:`width: 45vw; height: 71.2vh;`,然后将背景图片往底边对齐。
+
+ ```css
+ #page1 > .p1-denglong {
+ width: 45vw;
+ height: 71.2vh;
+ /* 让图片水平居中 */
+ margin: 0 auto;
+ background: url(./images/p1_lantern.png) no-repeat center bottom;
+ background-size: 100%;
+ }
+ ```
+
+ 这样子设置后,我们发现图片距离顶部有一段位置,并不是平整的接触顶部。这时候我们要将图形向上移动一段位置,通过测量具体是`3.1vh`的高度。对于平移,我们可以使用下列两种方法。
+
+ - 相对定位偏移
+
+ ```css
+ #page1 > .p1-denglong {
+ /*...*/
+ position: relative;
+ top: -3.1vh;
+ }
+ ```
+
+ - 决对定位法
+
+ ```css
+ #page1 > .p1_denglong {
+ /* ... */
+ position: absolute;
+ top: -3.1vh;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ }
+ ```
+
+- 设置灯笼中间的文本
+
+ 将灯笼往上移后,文本也跟着上移被遮挡了。我们需要将文字调整到我们盒子的正中心。我们可以用flex布局,让文本可以在处置方向上处置居中,也可以通过测量,直接将文本距离上边距的高度测量出来。
+
+ ```css
+ #page1 > .p1_denglong {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ /* 计算得来的值 */
+ font-size: 3.506rem;
+ }
+ ```
+
+ or
+
+ ```css
+ #page1 > .p1_denglong {
+ padding-top: 31vh;
+ text-align: center;
+ }
+ ```
+
+ 上面代码,设置内边后,我们灯笼盒子的高度发生了变化。这不是我们想要的。这个时候,我们可以增加一个属性`box-sizing: border-box`。
+
+ > **box-sizing**
+ >
+ > - 默认值为:content-box。这种情况下,我们给盒子设置的宽度和高度是盒子模型中`content`区域的宽度和高度。而我们的盒子的大小 = content + padding + border。所以我们设置了padding后,盒子高度变了,背景图片位置错乱。
+ > - border-box:当设置为这个值后,我的盒子大小就是我们设置的width和height。增加了padding值之后,会压缩我们content区域的大小。
+
+- 闪烁的光圈设置
+
+ 因为这个光圈是没有实际意义的,我们为了简化我们的结构。我们用CSS伪元素来绘制这个光圈。光圈一样是垂直水平居中的。我们从之前的方法中选择一种来实现。
+
+ ```css
+ #page1 > .p1-denglong::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: margin;
+ width: 30vw;
+ height: 30vw;
+ background-color: #d60b3b;
+ opacity: 0.5;
+ box-shadow: 0 0 10vw 10vw #d60b3b;
+ border-radius: 50%;
+ }
+ ```
+
+ > 动画效果,我们后面统一来加。
+
+- 接下来是页面底部的logo和文字展示。我们均使用绝对定位来布局。
+
+ ```css
+ #page1 > .p1-logo {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 9vh;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 10vh;
+ margin: auto;
+ }
+ #page1 > .p1-words {
+ font-size: 2.134rem;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 48px;
+ text-align: center;
+ }
+ ```
+
+## 4. 第二页
+
+第二页样式比较简单。一个背景图片,中间有三个圈,一个年份的图片。
+
+- 背景图,和页面一一样的处理,只是背景图片不一样。
+
+ ```css
+ #page2 > .bg {
+ background-image: url(./images/p2_bg.jpg);
+ }
+ ```
+
+- 中间的文字图片设置,垂直居中。
+
+ ```css
+ #page2 > .p2-year {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_2022.png) no-repeat center center;
+ background-size: 100%;
+ width: 35vw;
+ height: 35vw;
+ }
+ ```
+
+- 中间的圆圈,我们要放置三个圆。所以我们分别一个用在背景图,一个用在`::before`伪元素,一个用在`::after`伪元素。
+
+ > 最外面的圆的大小为:60vw * 60vw
+ >
+ > 中间的圆的大小为:46vw * 46vw
+ >
+ > 最内侧的圆大小为:40vw * 40vw
+
+## 5. 第三页
+
+第三页的内容,分为背景,logo,对联,贺词,福字。
+
+代码略。
+
+位置信息:
+
+- logo:大小:50vw * 6vh, top: 8vh
+- 贺词:大小:48vw * 50vh, top: 21vh
+- 左边对联:大小:23vw * 42vh, top: 25.5vh, left: 3.75vw
+- 右边对联:大小:23vw * 42vh, top: 25.5vh, right: 3.75vw
+- 福:大小:35vw * 35vw, bottom: 5vh
+
+## 6. 页面动画效果
+
+### 6.1 音乐播放器
+
+磁盘的旋转:磁盘可以一直旋转下去,所以我们使用animation来设置动画。转一圈时间 4s,匀速转动。因为我们的播放器不是一直旋转的,它是可以暂停的,所以我么增加一个类来专门处理动画。
+
+```css
+#music > img.play {
+ animation: music_disc 4s linear infinite;
+}
+@keyframes music_disc {
+ from {transform: rotate(0deg);}
+ to {transform: rotate(360deg);}
+}
+```
+
+### 6.2 第一页
+
+中心圆圈的闪烁,我们可以看出,它其实在重复的做放大、缩小的效果。且这个变化是来来回回的。所以我们需要设置animation的另外一个属性,`animation-direction:alternate` 动画先执行一遍,然后再反向执行一遍。
+
+```css
+#page1 > .p1-denglong::before {
+ animation: p1_lantern 0.5s infinite alternate;
+}
+@keyframe p1_lantern {
+ from {
+ opacity:0.5;
+ transfrom: scale(0.8, 0.8);
+ }
+ to {
+ opacity: 1;
+ }
+}
+```
+
+### 6.3 第二页
+
+中间的三个圈转动,分别给三个圈设置动画。
+
+- 最里面的圈是最开始动的。而且转速比较快,我们设置动画时间为1s,匀速转动,延迟时间为1s(一开始进入页面的时候没有转动),转动次数不限制。
+
+ 每次逆时针转动3圈。
+
+- 中间的圈,是在里面的圈转后才之执行转动的。且转动的方向不一样。
+
+ 动画时长也是1s,延迟2s开始转动(等内圈执行一次动画后再执行),匀速转动,不限次数。
+
+ 每次动画都顺时针转动2圈。
+
+- 最外层的圈,转动最缓慢,延时时间最长。
+
+ 动画时长也为1s,延迟时间3s,匀速运动,不限次数。
+
+ 每次动画逆时针转1圈。
+
+### 6.4 第三页
+
+这个页面只有一个匀速转动的福字。
+
+动画过渡时间2s,匀速转动,不限次数。每次都顺时针旋转1圈。
+
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/16-\346\241\210\344\276\213\345\256\236\350\267\265-\344\272\244\344\272\222\345\210\206\346\236\220.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/16-\346\241\210\344\276\213\345\256\236\350\267\265-\344\272\244\344\272\222\345\210\206\346\236\220.md"
new file mode 100644
index 0000000000000000000000000000000000000000..663364a8dff74f6d1d07762cfe238ac9b8552b38
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/16-\346\241\210\344\276\213\345\256\236\350\267\265-\344\272\244\344\272\222\345\210\206\346\236\220.md"
@@ -0,0 +1,210 @@
+# 案例分析 - 交互分析
+
+## 1. 音乐播放器交互
+
+我们需要给我们的页面添加一个audio元素来放我们的音频文件。
+
+```html
+
+
+
+```
+
+我们将播放器设置为自动播放。chrome浏览器不允许自动播放,只有用户点击操作的时候,我们才可以播放元素。所以在代码里面,我们需要监听音乐播放器盒子的点击事件(移动端,我们使用touchstart)。
+
+```js
+let music = document.getElementById('music');
+let audio = document.querySelector('audio');
+music.addEventListener('touchstart', function() {
+ if (audio.paused) {
+ audio.play();
+ // 添加动画效果
+ music.querySelector('img')[1].classList.add('play');
+ } else {
+ audio.pause();
+ music.querySelector('img')[1].classList.remove('play');
+ }
+});
+```
+
+在操作过程中,我们发现,暂停后,音乐磁盘直接回到初始状态。我们想要暂停时,磁盘旋转停留在当前位置。这个时候我们用一个属性来控制:`animation-play-state`属性,这个属性默认值为`running`,表示动画正在播放;如果值设置为`paused`,则设置动画暂停。因此,我们通过增加`play`这个类的方式,不合适。
+
+为了方便我们控制磁盘,我们将id设置在`磁盘`元素上,并默认给它加上`play`这个类。
+
+```html
+
+
+
+
+```
+
+```js
+music.addEventListener('touchstart', function() {
+ if (audio.paused) {
+ audio.play();
+ // 添加动画效果
+ music.style.animationPlayState = 'running';
+ } else {
+ audio.pause();
+ music.style.animationPlayState = 'paused';
+ }
+})
+```
+
+为了兼容谷歌浏览器不能自动播放的问题,我们需要在页面加载后,就将动画设置为暂停。
+
+```js
+if (audio.paused) {
+ music.style.animationPlayState = 'paused';
+} else {
+ music.style.animationPlayState = 'running';
+}
+```
+
+除了手动添加暂停,放音乐播放结束后,我们也将关盘停止旋转。这时候,我们希望是回到初始状态。所以我们这种情况处理的时候,是将类移除掉。
+
+```js
+audio.addEventListener('ended', function() {
+ music.classList.remove('play');
+});
+```
+
+对应的,再次播放的时候,需要将play类加回去。
+
+```js
+music.addEventListerner('touchstart', function() {
+ if (audio.paused) {
+ music.classList.add('play');
+ // ...
+ }
+ // ...
+})
+```
+
+## 2. 第一页交互
+
+我们的页面不能滚动,所以我们将所以页面设置为绝对定位,当第二页和第三页不展示的时候,我们将他们隐藏`display: none`。
+
+```css
+.page {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+#page2 {
+ display: none;
+}
+#page3 {
+ display: none;
+}
+```
+
+第一个页面,我们点击屏幕的时候,第一页隐藏,第二页显示。
+
+```js
+let page1 = document.getElementById('page1');
+let page2 = document.getElementById('page2');
+let page3 = document.getElementById('page3');
+
+page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+});
+```
+
+## 3. 第二页
+
+第二页,我们发现我们并不需要增加用户交互,或者说用户交互的时候没有效果。第二页的动画执行了4s,我们设计,在第二页停留5s,然后页面就跳转到第三个页面。
+
+```js
+page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+
+ // 设计一个定时器,5s后,隐藏第二页,显示第三个
+ setTimeout(function() {
+ page2.style.display = 'none';
+ page3.style.display = 'block';
+ }, 5000);
+});
+```
+
+## 4. 过渡优化
+
+我们的真实例子里面,第二页和第三页之间的交互,发现第三页是上滑的效果。效果只执行一次。我们可以用`transition`属性来实现这个效果。页面从下往上,我们可以设计元素在Y轴的偏移来实现。
+
+因为第三页是绝对定位的,初始位置位于页面的顶部,这样子在Y轴上偏移,从下往上,则`translateY()`的值为负数。这样子,我们应该默认让页面位于底部。
+
+```css
+#page3 {
+ display: none;
+ /* 让页面位于一屏之后 */
+ top: 100%;
+ /* 过渡时长0.5s */
+ transition: all 0.5s;
+}
+```
+
+第三页的终态,则是将页面在Y轴偏移高度的100%;我们为终态设置一个类,这样方便js直接添加类来实现效果。
+
+```css
+#page3.fade-in {
+ transform: translate(0, -100%);
+}
+```
+
+第二页,我们一样处理,将页面沿Y轴,上移100%,移除页面。同时我们给他增加一个类名fade-out。
+
+```css
+#page2 {
+ display: none;
+ transition: all 0.5s;
+}
+#page2.fade-out {
+ transform: translate(0, -100%);
+ /* 同时我们增加一个透明度的过渡效果,体验更佳 */
+ opaticy: 0.3;
+}
+```
+
+即js操作时:
+
+```js
+page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+ /* 将第三页也展示出来,之后靠过渡效果 */
+ page3.style.display = 'block';
+
+ // 设计一个定时器,5s后,隐藏第二页,显示第三个
+ setTimeout(function() {
+ page2.classList.add('fade-out');
+ page3.classList.add('fade-in');
+ }, 5000);
+});
+```
+
+## 5. 第二页过渡优化
+
+我们发现第二页到第三页的过渡效果有点生硬,我们尝试给第二页增加一个透明层的过渡效果。
+
+因为不方便触发transition,所以我们使用`animation`属性。我们在`page2`的页面标签里面增加一个`div`盒子。
+
+```html
+
+```
+
+```css
+#page2 > .p2-bg-loading {
+ z-index: 4;
+ background-color: #ef1639;
+ animation: p2_bg_loading 1s linear forward;
+}
+@keyframes p2_bg_loading {
+ from {opacity: 1;}
+ to {opaticy: 0;}
+}
+```
+
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/17-\347\247\273\345\212\250\347\253\257touch\344\272\213\344\273\266.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/17-\347\247\273\345\212\250\347\253\257touch\344\272\213\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b206bda309fe3644c2a4ccb78c46571b3186d807
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/17-\347\247\273\345\212\250\347\253\257touch\344\272\213\344\273\266.md"
@@ -0,0 +1,175 @@
+# 移动端touch,click事件的理解
+
+移动端在touch上一共有4个事件:` touchstart`, `touchmove`, `touchend`, `touchcancel`。一般来说,他们的执行顺序是:` touchstart` ->` touchmove` ->` touchend` -> `touchcancel `. 其中`touchcancel`一般情况下不会触发,也不是这里讨论的焦点。
+
+举个例子:
+
+```html
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+```
+
+## 1.1 touch和click事件的执行顺序
+
+上面的代码,在手机状态下,我们点击盒子时,控制台输出了:
+
+
+
+针对结果我们发现:
+
+- `touchmove` 事件没有触发。这是因为我们没有移动。
+- `touchend`事件执行后,会执行`click`事件在,并且有一定的时间延迟。
+
+由此我们可以得出结论:
+
+**当一个用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先处理,touch事件经过 捕获,处理, 冒泡 一系列流程处理完成后, 才回去触发click事件**
+
+## 1.2 touchmove 与 click 事件
+
+我们再次点击盒子,并且移动了。结果:
+
+
+
+我们发现:
+
+- `touchmove`事件被触发了多次
+- `click`事件没有触发了。**这是因为click事件执行的点击事件,不是移动。所以一般情况下,我们可以理解`touchmove`和`click`事件是互斥的。**
+
+## 3. 禁用 click 事件
+
+我们知道touch事件和click事件有了优先级别,那么能不能在touch阶段取消系统触发click事件呢?答案是可以的,浏览器提供了这样的能力。在touch事件里面,调用`e.preventDefault()`就可以阻止本次点击系统触发的click事件,即本次相关的click都不会执行。
+
+``` js
+box.addEventListener('touchstart', function(e) {
+ console.log('touchstart', +new Date());
+ e.preventDefault();
+})
+```
+
+
+
+点击盒子后,由输出结果,我们可以看出,click事件没有触发。
+
+
+
+## 4. 事件穿透
+
+```html
+
+
+
+```
+
+上面代码,**盒子1和盒子2是兄弟节点,它们之间不会发生什么事件传递。**当前,将盒子1通过定位覆盖在盒子2的上面。我们点击盒子1的时候,在它的`touchstart`事件触发时,将自己隐藏起来。然后我们发现盒子2的`click`事件被触发。这就是发生事件穿透。
+
+**事件穿透发生的条件:**
+
+1. A 和 B 不是后代继承关系(如果存在后代继承关系的话,就是冒泡之类的话题了);
+2. A 的`z-index` 大于 B,即 A 显示在 B 浮层之上
+3. A 发生 `touch`,A 在 `touch` 后立即消失,B 绑定了 `click` 事件。
+
+**事件穿透的原因:**
+
+> 当手指触摸到屏幕的时候,系统生成了两个事件,一个是`touch`,一个是`click`。`touch`先执行, `click` 后面执行,执行`click`事件的时候,相对于`touch`事件有延时。`touch`执行之后,A 从文档树上消失了,系统再次执行 `click` 事件的时候,发现在用户点击的位置上,当前的元素是 B,所以就直接把 click 事件作用在 B 元素上面了。
+
+**如何解决事件穿透的问题呢?**
+
+- 前面介绍了,系统提供了先触发touch事件后,取消系统生成click事件的方法。我们只要在touch事件的某个处理函数中执行`e.preventDefault()`即可。
+
+- 解决穿透问题,关键是可以破坏生成的条件。
+
+ - 不在 B 上绑定click事件(如果业务需求不允许,则此方法不可行)
+
+ - 即让click事件执行时,A 元素还存留来页面中。即可以设置延迟,一般是300ms。
+
+ ```js
+ setTimeout(function() {
+ box1.style.display = 'none';
+ }, 300)
+ ```
+
+
+
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-01.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-01.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eff41e29841f017c6877f57f3e26b0024eb8776f
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-01.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-02.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-02.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c291651cf06b79a991bc40720fe7ce3a3b773297
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/14/14-music-02.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/accordion.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/accordion.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5ed90e8b8f8c7751ec90cf64094c15a01edf7a89
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/accordion.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading1.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a6e552e0d4f2a0d28560a6ab79796a8cf746cd6e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading1.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..dc9d3618b40dec9a2623f605b3164a0715155a18
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/loading2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/pop.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/pop.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0022a32badbd7804f0a37a74a1bd0f753c3afe0e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/courseware/images/utils/pop.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/._demo.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/._demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cbb60c53b51a4fccc7b10ff50c26f78634050332
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/._demo.html" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/accordion.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/accordion.html"
new file mode 100644
index 0000000000000000000000000000000000000000..26d0391cf8c66fecf353934b1cd9908cc152ac89
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/accordion.html"
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/audio/happynewyear.mp3" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/audio/happynewyear.mp3"
new file mode 100644
index 0000000000000000000000000000000000000000..87d1b9217291a6bb28cd7ce37b6e7a083114150e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/audio/happynewyear.mp3" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/demo.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..06b5a8d5565dd34a2e3c2ec90ad470e29e31345d
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/demo.html"
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
点击屏幕 开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/._p1_lantern.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/._p1_lantern.png"
new file mode 100644
index 0000000000000000000000000000000000000000..36d0985faf32ada5680279ce0c41a2c0877f0bd0
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/._p1_lantern.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/01.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/01.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..5e2d9f59fac9849e09850002846bc8a12ce5c8ff
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/01.jpeg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/02.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/02.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..664102e152f33a47daf42ca50a397c071922c068
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/02.jpeg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/03.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/03.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..36de5608cf890d2d3e73023a072e36d04231e757
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/03.jpeg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/04.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/04.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..5e2d9f59fac9849e09850002846bc8a12ce5c8ff
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/04.jpeg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/05.jpeg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/05.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..664102e152f33a47daf42ca50a397c071922c068
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/05.jpeg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_disc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_disc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5716f4fc65d8ef58399d5f9fd87254b7f7972f30
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_disc.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_pointer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_pointer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b148617f0036813e52ee2a202bc15a23429e457
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/music_pointer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..316710c14ab68405e840d2eb05f2501347cfa2a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_imooc.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_imooc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d12211656f27f5b290478f995bb394c526227db7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_imooc.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_lantern.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_lantern.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2b63c2a52de3e18808f498e4148b3dbcd814dcda
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_lantern.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_minxi.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_minxi.png"
new file mode 100644
index 0000000000000000000000000000000000000000..43f28a59c910f2afc5808dc61e6f7ef44dc6a7a4
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p1_minxi.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2016.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2016.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a6d88a829e76d3d5e8e0d8d85a7f6164a1b6b2d7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2016.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2022.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2022.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ecf7f086e9d2f6c658ae55c5eb80099c7027c099
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_2022.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1e7392b1712f0f92a43e0f951a5bd96f14303322
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_inner.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_inner.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7ce8cb402ecb33b597468a4301ee865e3101df15
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_inner.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_middle.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_middle.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c1623989a0f141d300791976b5b11694ebe6365c
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_middle.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_outer.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_outer.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7499558bda43507716f3d9833afd03884f7e353a
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p2_circle_outer.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_bg.jpg" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_bg.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e1a33ded969a5b654e1c5cb85462227c63b1f876
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_bg.jpg" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_blessing.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_blessing.png"
new file mode 100644
index 0000000000000000000000000000000000000000..44ce9967834e0862cff4ee83dc20313fdf904782
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_blessing.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_first.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_first.png"
new file mode 100644
index 0000000000000000000000000000000000000000..165db8c8ba1a6528227f7ac3ce7971417da23745
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_first.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_second.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_second.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fdc1815d4349ee797792f2dcac19591b802bda9e
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_couplet_second.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_logo.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..8391ca83706cc3bb1ed76f18df9efd26fd61c01f
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_logo.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title.png"
new file mode 100644
index 0000000000000000000000000000000000000000..571933318cdadab50b392c5a8f3d6fa934cd7c24
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title2.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..10fae7fdf5ccc6357dd8e90b1e6c1b8f4daec5dd
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/p3_title2.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/title.psd" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/title.psd"
new file mode 100644
index 0000000000000000000000000000000000000000..522229feb30b25d0828f9fa940e431549aaa60eb
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/title.psd" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4b62575cc736d45955da15c2deca88001caf65f7
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/images/\345\276\256\344\277\241\346\210\252\345\233\276_20211201173950.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.css"
new file mode 100644
index 0000000000000000000000000000000000000000..76a8180197dd862053b5272be3bd2991febbbea2
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.css"
@@ -0,0 +1,300 @@
+
+/* 全局样式 */
+* {
+ margin: 0;
+ padding: 0;
+}
+html,
+body {
+ height: 100%;
+}
+
+html {
+ font-size: 1.526vw;
+ font-family: 'Microsoft YaHei';
+}
+.p-absolute-center {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+}
+
+/* 音乐播放器 */
+.music {
+ position: fixed;
+ top: 3vh;
+ right: 4vw;
+ width: 15vw;
+ height: 15vw;
+ border-radius: 50%;
+ border: 4px solid #ef1635;
+ background-color: white;
+ display: flex;
+ /* 控制元素水平居中 */
+ justify-content: center;
+ /* 控制元素垂直居中 */
+ align-items: center;
+ z-index: 2;
+}
+.music > img:first-of-type {
+ position: absolute;
+ top: 24%;
+ right: 2.5%;
+ width: 28.426%;
+ z-index: 1;
+}
+.music > img:last-of-type {
+ width: 79%;
+}
+.music > img.play {
+ animation: music_disc 4s linear infinite;
+}
+@keyframes music_disc {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+/* 第一个页面 */
+.page {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+.bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100% 100%;
+ z-index: -1;
+}
+#page1 > .bg {
+ background-image: url(./images/p1_bg.jpg);
+}
+#page1 > .p1-lantern {
+ position: relative;
+ top: -3.1vh;
+ width: 45vw;
+ height: 71.2vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ /* 让图片水平居中 */
+ margin: 0 auto;
+ background: url(./images/p1_lantern.png) no-repeat center bottom;
+ background-size: 100%;
+ /* 计算得来的值 */
+ font-size: 3.506rem;
+}
+#page1 > .p1-lantern::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ width: 30vw;
+ height: 30vw;
+ background-color: #d60b3b;
+ opacity: 0.5;
+ box-shadow: 0 0 10vw 10vw #d60b3b;
+ border-radius: 50%;
+ z-index: -1;
+ animation: p1_lantern 0.5s infinite alternate;
+}
+@keyframes p1_lantern {
+ from {
+ opacity: 0.5;
+ transform: scale(0.8, 0.8);
+ }
+ to {
+ opacity: 1;
+ }
+}
+#page1 > .p1-logo {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 9vh;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 10vh;
+ margin: auto;
+ }
+ #page1 > .p1-words {
+ font-size: 2.134rem;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 48px;
+ text-align: center;
+ }
+/* 第二个页面 */
+#page2 {
+ display: none;
+ transition: all 0.5s;
+}
+#page2.fade-out {
+ opacity: 0.3;
+ transform: translateY(-100%);
+}
+#page2 > .bg {
+ background-image: url(./images/p2_bg.jpg);
+}
+
+#page2 > .p2-year {
+ background: url(./images/p2_2022.png) no-repeat center center;
+ background-size: 100%;
+ width: 35vw;
+ height: 35vw;
+}
+
+#page2 > .p2-circle {
+ background: url(./images/p2_circle_outer.png) no-repeat center center;
+ background-size: 100%;
+ width: 60vw;
+ height: 60vw;
+ border-radius: 50%;
+ animation: p2_circle_outer 1s linear 3s infinite;
+}
+@keyframes p2_circle_outer{
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(-360deg);
+ }
+}
+#page2 > .p2-circle::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_circle_middle.png) no-repeat center center;
+ background-size: 100%;
+ width: 46vw;
+ height: 46vw;
+ border-radius: 50%;
+ animation: p2_circle_middle 1s linear 2s infinite;
+}
+#page2 > .p2-circle::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_circle_inner.png) no-repeat center center;
+ background-size: 100%;
+ width: 40vw;
+ height: 40vw;
+ border-radius: 50%;
+ animation: p2_circle_inner 1s linear 1s infinite;
+}
+@keyframes p2_circle_inner {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(-1080deg);
+ }
+}
+@keyframes p2_circle_middle {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(720deg);
+ }
+}
+/* 第三个页面 */
+#page3 {
+ display: none;
+ top: 100%;
+ transition: all 0.5s;
+}
+#page3.fade-in {
+ transform: translateY(-100%);
+}
+#page3 > .bg {
+ background-image: url(./images/p3_bg.jpg);
+}
+#page3 > .p3-logo {
+ width: 50vw;
+ height: 6vh;
+ position: absolute;
+ top: 8vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ }
+ #page3 > .p3-title {
+ width: 48vw;
+ height: 50vh;
+ position: absolute;
+ top: 21vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p3_title2.png) no-repeat center center;
+ background-size: 100%;
+ }
+ #page3 > .p3-left {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ left: 3.75vw;
+ background: url(./images/p3_couplet_second.png) no-repeat center center;
+ background-size: 100%;
+ }
+ #page3 .p3-right {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ right: 3.75vw;
+ background: url(./images/p3_couplet_first.png) no-repeat center center;
+ background-size: 100%;
+ }
+ #page3 > .p3-fu {
+ width: 35vw;
+ height: 35vw;
+ position: absolute;
+ bottom: 5vh;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ background: url(./images/p3_blessing.png) no-repeat center center;
+ background-size: 100%;
+ border-radius: 50%;
+ animation: p3_fu 1s linear infinite;
+ }
+ @keyframes p3_fu {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..56c91dd5f6362e3f3a2320041747e136cac88bdc
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.html"
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
点击屏幕 开启好运2022
+
+
软工学院新年特献
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.js"
new file mode 100644
index 0000000000000000000000000000000000000000..1c0a6e70972fcbca701945423a71cf6877c88f17
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index.js"
@@ -0,0 +1,44 @@
+window.addEventListener('DOMContentLoaded', function() {
+ let music = document.getElementById('music');
+ let audio = document.querySelector('audio');
+
+ let page1 = document.getElementById('page1');
+ let page2 = document.getElementById('page2');
+ let page3 = document.getElementById('page3');
+ // 兼容谷歌浏览器不能自动播放的问题
+ if (audio.paused) {
+ music.style.animationPlayState = 'paused';
+ } else {
+ music.style.animationPlayState = 'running';
+ }
+ // 点击音乐图标,控制音乐播放器效果
+ music.addEventListener('touchstart', function() {
+ if (audio.paused) {
+ audio.play()
+ // 当音乐停止后,会将play这个类移除掉,所以当音乐再次点击播放时,需要将这个类加上。
+ music.classList.add('play');
+ music.style.animationPlayState = 'running';
+ } else {
+ audio.pause()
+ music.style.animationPlayState = 'paused';
+ }
+ })
+ // 当音乐播放结束后,自动停止光盘旋转效果
+ audio.addEventListener('ended', function() {
+ music.classList.remove('play');
+ });
+
+ // 显示翻页效果
+ page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+ page3.style.display = 'block';
+ page3.style.top = '100%';
+
+ // 设置计时器,当第二个页面动画运行结束后,直接跳转到第三个页面
+ setTimeout(() => {
+ page2.classList.add('fade-out');
+ page3.classList.add('fade-in')
+ }, 5500);
+ })
+})
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index2.js" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index2.js"
new file mode 100644
index 0000000000000000000000000000000000000000..16ce684c76e3da54b9c03eddf276e25fc44ed166
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/index2.js"
@@ -0,0 +1,47 @@
+// 在DOM加载完后,执行我们的js
+window.addEventListener('DOMContentLoaded', function() {
+ let music = document.getElementById('music');
+ let audio = document.querySelector('audio');
+ let page1 = document.getElementById('page1');
+ let page2 = document.getElementById('page2');
+ let page3 = document.getElementById('page3');
+
+ if (audio.paused) {
+ music.classList.remove('play');
+ } else {
+ music.classList.add('play')
+ }
+
+ // 事件监听
+ music.addEventListener('touchstart', function() {
+ // 控制音乐播放器,播放
+ if (audio.paused) {
+ audio.play();
+ music.classList.add('play');
+ music.style.animationPlayState = 'running';
+ } else {
+ audio.pause();
+ music.style.animationPlayState = 'paused';
+ }
+ });
+
+ // 当音乐播放完后,我们暂停我们的动画。
+ audio.addEventListener('ended', function() {
+ music.classList.remove('play');
+ });
+
+ // 页面切换
+ page1.addEventListener('touchstart', function() {
+ page1.style.display = 'none';
+ page2.style.display = 'block';
+ page3.style.display = 'block';
+
+ // 设置计时器,5s后,隐藏第二页
+ setTimeout(function() {
+ page2.classList.add('fade-out');
+ page3.classList.add('fade-in')
+ }, 5000);
+ });
+});
+// 同jq的什么方法
+// $(function() {}), $(document).ready(function(){})
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/loading.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/loading.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6ca55f43673ec73219bf86ff83d39e1399ed129c
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/loading.html"
@@ -0,0 +1,134 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/pop.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/pop.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3309bd94d9b9c1fc0a6197117917d532acfd0190
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/pop.html"
@@ -0,0 +1,89 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
气泡提示
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/scrollbar.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/scrollbar.html"
new file mode 100644
index 0000000000000000000000000000000000000000..23d224282b5271db99207a41214cb9c675e3ff1e
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/scrollbar.html"
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/style.css" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/style.css"
new file mode 100644
index 0000000000000000000000000000000000000000..138a38bb6399444b385983fa000bf819fa3ef5d5
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/style.css"
@@ -0,0 +1,324 @@
+/* 通用设置 */
+* {
+ margin: 0;
+ padding: 0;
+}
+:root {
+ font-size: 1.526vw;
+ font-family: 'Microsoft Yahei';
+}
+html,body {
+ height: 100%;
+}
+/* 音乐盒子 */
+.music {
+ position: fixed;
+ top: 3vh;
+ right: 4vw;
+ width: 15vw;
+ height: 15vw;
+ border: 4px solid #ef1635;
+ border-radius: 50%;
+ background-color: #fff;
+ z-index: 2;
+}
+.music > img:first-of-type {
+ position: absolute;
+ top: 24%;
+ right: 2.5%;
+ width: 28.426%;
+ z-index: 1;
+}
+.music > img:last-of-type {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ width: 79%;
+}
+.music > audio {
+ opacity: 0;
+}
+.music > img.play {
+ animation: music_disc 4s linear infinite;
+}
+@keyframes music_disc {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+/* 背景设置 */
+.page {
+ position: absolute;
+ width: 100vw;
+ height: 100%;
+ top: 0;
+ left: 0;
+}
+.page > .bg {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+}
+/* 第一个页面 */
+#page1 {
+ display: block;
+}
+#page1 .bg {
+ background-image: url(./images/p1_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page1 > .p1-denglong {
+ position: absolute;
+ top: -3.1%;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
+ width: 45vw;
+ height: 71.2vh;
+ font-size: 3.506rem;
+ background: url(./images/p1_lantern.png) no-repeat center bottom;
+ background-size: 100%;
+ padding-top: 31vh;
+ box-sizing: border-box;
+ text-align: center;
+}
+#page1 > .p1-denglong::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ margin: auto;
+ z-index: -1;
+ width: 30vw;
+ height: 30vw;
+ background-color: #d60b3b;
+ opacity: 0.5;
+ box-shadow: 0 0 10vw 10vw #d60b3b;
+ border-radius: 50%;
+ /* 添加动画效果 */
+ animation: p1_lantern .5s infinite alternate;
+}
+@keyframes p1_lantern {
+ 0% {
+ opacity: 0.5;
+ transform: scale(0.8, 0.8);
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+#page1 > .p1-icon {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 9vh;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+ width: 50vw;
+ height: 10vh;
+ margin: auto;
+}
+#page1 > .p1-words {
+ font-size: 2.134rem;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 48px;
+ text-align: center;
+}
+
+/* 第二个页面 */
+#page2 {
+ display: none;
+ transition: all 0.5s;
+}
+#page2.fade-out {
+ opacity: .3;
+ transform: translate(0, -100%);
+}
+#page2 > .bg {
+ background-image: url(./images/p2_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page2 > .p2-bg-loading {
+ z-index: 4;
+ background-color: #ef1639;
+ animation: p2_bg_loading 1s linear forwards;
+}
+@keyframes p2_bg_loading {
+ 0% {opacity: 1;}
+ 100% {opacity: 0;}
+}
+#page2 > .p2-circle {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_outer.png) no-repeat center center;
+ background-size: 100%;
+ width: 60vw;
+ height: 60vw;
+ /* 添加动画 */
+ animation: p2_circle_outer 1s linear 3s infinite;
+}
+@keyframes p2_circle_outer {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-360deg);
+ }
+}
+#page2 > .p2-circle::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_middle.png) no-repeat center center;
+ background-size: 100%;
+ width: 46vw;
+ height: 46vw;
+ /* 添加动画 */
+ animation: p2_circle_middle 1s linear 2s infinite;
+}
+@keyframes p2_circle_middle {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(720deg);
+ }
+}
+#page2 > .p2-circle::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ border-radius: 50%;
+ background: url(./images/p2_circle_inner.png) no-repeat center center;
+ background-size: 100%;
+ width: 40vw;
+ height: 40vw;
+ /* 添加动画 */
+ animation: p2_circle_inner 1s linear 1s infinite;
+}
+
+@keyframes p2_circle_inner {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(-1080deg);
+ }
+}
+#page2 > .p2-year {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto;
+ background: url(./images/p2_2022.png) no-repeat center center;
+ background-size: 100%;
+ width: 35vw;
+ height: 35vw;
+}
+
+/* 第三个页面 */
+#page3 {
+ display: none;
+ transition: all 0.5s;
+}
+#page3.fade-in {
+ transform: translate(0, -100%);
+}
+#page3 > .bg {
+ background-image: url(./images/p3_bg.jpg);
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: 100%;
+}
+#page3 > .p3-logo {
+ width: 50vw;
+ height: 6vh;
+ position: absolute;
+ top: 8vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p1_minxi.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-title {
+ width: 48vw;
+ height: 50vh;
+ position: absolute;
+ top: 21vh;
+ left: 0;
+ right: 0;
+ margin: auto;
+ background: url(./images/p3_title2.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-second {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ left: 3.75vw;
+ background: url(./images/p3_couplet_second.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 .p3-first {
+ width: 23vw;
+ height: 42vh;
+ position: absolute;
+ top: 25.5vh;
+ right: 3.75vw;
+ background: url(./images/p3_couplet_first.png) no-repeat center center;
+ background-size: 100%;
+}
+#page3 > .p3-fu {
+ width: 35vw;
+ height: 35vw;
+ position: absolute;
+ bottom: 5vh;
+ right: 0;
+ left: 0;
+ margin: 0 auto;
+ background: url(./images/p3_blessing.png) no-repeat center center;
+ background-size: 100%;
+ border-radius: 50%;
+ animation: p3_blessing 2s linear infinite;
+}
+@keyframes p3_blessing {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6a8012cfc689f9c6f38bfdf5cf0ed42acb6a9287
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch.html"
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4f75a4f51c524bab77f321102e5e332f5ea15522
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/touch2.html"
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/triangle.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/triangle.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4e5caf55fe55e5e3a7992441ebf9b2bb1bcc3fd3
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/example/triangle.html"
@@ -0,0 +1,57 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5e7b412300582e2b1dff8df5f87e5c347c39ca94
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo01.html"
@@ -0,0 +1,69 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ecbdfc17cf840f9aadcd2c6934e0840a1ab31b92
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo02.html"
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+ 气泡提示
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo03.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo03.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f3cb3de4a69dcdb648e9326f418427cf21627e6f
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_15/text/demo03.html"
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo01.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..935e50ae2caaf4e71e8e4dfd4b51352ab45a0092
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo01.html"
@@ -0,0 +1,103 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo02.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8ec5e728b29cd7c165315d5e998b950d4f3307aa
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/2021129-css\345\274\200\345\205\263/demo02.html"
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
正文内容
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/19-CSS\346\212\200\345\267\247.md" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/19-CSS\346\212\200\345\267\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..786903108e92a15aa5516adef34865f47ea81c91
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/19-CSS\346\212\200\345\267\247.md"
@@ -0,0 +1,408 @@
+# CSS 技巧
+
+本节介绍一些项目中常用的处理布局的技巧。
+
+## 1. 垂直居中
+
+### 法一: absolute定位 + tansform:translateY(-50%)
+
+```css
+.parent {
+ position: relative;
+}
+/* 方法一:transform:translateY(-50%) */
+.child {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+}
+```
+
+### 法二:absolute定位 + margin:auto
+
+```css
+.parent {
+ position: relative;
+}
+.child {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ margin: auto;
+}
+```
+
+### 法三:flex布局,align-items: center
+
+```css
+.parent {
+ display: flex;
+ align-items: center;
+}
+```
+
+## 2. 文本超出显示省略号
+
+### 单行文本
+
+```css
+.article-container {
+ /*宽度是必须的*/
+ width: 500px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+```
+
+### 多行文字
+
+```css
+.article-container {
+ display: -webkit-box;
+ word-break: break-all;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 4; //需要显示的行数
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+```
+
+> 主要属性是:`-webkit-line-clamp`。这个属性当前除了IE浏览器,其他浏览器兼容性都挺好。
+>
+> **`-webkit-line-clamp`**属性可以把块容器中的内容限制为指定的行数。它只有在`display: -webkit-box`或者`display: -webkit-inline-box`,并且`-webkit-box-orient: vertical`时,才有效果。大多数情况下,我们还需要将`overflow`属性设置为`hidden`,否则内容不会被裁减。
+
+## 3. 圣杯布局
+
+此布局一般的需求为两边等宽,中间自适应的三栏布局。
+
+```html
+
+```
+
+### 旧方法:float布局(不推荐)
+
+```css
+/* 父元素清楚浮动,伪元素方式 */
+.main::after {
+ content: "";
+ clear: both;
+}
+.main > div {
+ float: left;
+ height: 250px;
+ background-color: #b4a078;
+ color: white;
+}
+.main .left,
+.main .right {
+ /* 左右两栏固定宽度 */
+ width: 119px;
+}
+.main .center {
+ background-color: aquamarine;
+ width: calc(100% - 119px * 2);
+}
+```
+
+### 新处理方式: flex 布局
+
+```css
+.main {
+ display: flex;
+ height: 250px;
+}
+.left,
+.right {
+ flex: 0 0 119px;
+ background-color: #b4a078;
+}
+.center {
+ flex: 1;
+ background-color: aquamarine;
+}
+```
+
+### grid布局
+
+```css
+.main {
+ display: grid;
+ grid-template-columns: 119px 1fr 119px;
+ column-gap: 10px
+}
+.left,
+.right {
+ background-color: #b4a078;
+}
+.center {
+ background-color: aquamarine;
+}
+```
+
+## 4. 全背景下等宽内容居中
+
+
+
+每个盒子宽度都是100%,现在将里面的内容在固定宽度中展示,并且缩放盒子时,内容一直是居中的。
+
+```html
+
+
+
+
+
+```
+
+以前,我们的做法是将盒子固定宽度,然后通过`margin: 0 auto`来使得盒子能够在页面上水平居中。但是这种方式的话,盒子的背景颜色不能够撑满父盒子的宽度。
+
+当前这种情况,我们的处理思路是:**padding + calc()**来处理。
+
+> 左右内边距 = (父元素宽度 - 展示内容固定宽度) / 2;
+
+假设中间内容区域宽度为: 900px。
+
+```css
+.main {
+ width: 100%;
+}
+.main > header,
+.main > section,
+.main > footer {
+ padding: 0 calc(50% - 450px);
+}
+```
+
+## 5. 自定义单选框
+
+浏览器自定义个单选框样式大多时候,不符合我们的业务需求,自定义单选框的使用场景很多。
+
+
+
+我们需要考虑的状态有:
+
+- 正常选中状态
+- 正常未选中状态
+- 禁用未选中状态
+- 禁用选中状态
+
+如下结构:
+
+```html
+
+
+ Vue
+
+ React
+
+ Angular
+
+ 禁用
+
+ 选中禁用
+
+```
+
+思路:
+
+1. `input`标签是单标签,它的内容不能够放置伪元素。原生样式的修改不容易,且不容易设置为我们想要的效果。所以我们将input元素隐藏,然后使用`
`标签`for`属性,来控制选中单选框。
+
+ ```css
+ input[type="radio"] {
+ display: none;
+ }
+ ```
+
+2. `input`标签隐藏后,我们要的样式就可以依赖`label`标签来实现。
+
+3. `label`标签通过添加伪元素来实现效果。
+
+ ```css
+ input[type="radio"] + label {
+ /* 控制内部元素可以垂直居中 */
+ display: inline-flex;
+ align-items: center;
+ position: relative;
+ cursor: pointer;
+ /* 禁止用户选择文本 */
+ user-select: none;
+ }
+ ```
+
+4. 我们的单选框在选中状态时,有一个圆弧轨道。这种效果,我们可以通过设置同心圆来实现。
+
+ ```css
+ /* 在文本前面添加一个带有边框颜色的圆 */
+ input[type="radio"] + label::before {
+ content: "";
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ margin-right: 0.2rem;
+ border: 1px solid #ccc;
+ background-color: #fff;
+ }
+ /* 绝对定位设置一个同心圆 */
+ input[type="radio"] + label::after {
+ content: "";
+ position: absolute;
+ width: 4px;
+ height: 4px;
+ left: 4px;
+ top: calc(50% - 2px);
+ background-color: #fff;
+ border-radius: 50%;
+ }
+ ```
+
+5. 接下来我们要处理选中状态下这些伪元素的样式。选中状态,我们可以通过`input:checked`这个伪类来匹配被选中的单选框。
+
+ ```css
+ input[type="radio"]:checked + label::before {
+ background-color: #b4a078;
+ border-color: #b4a078;
+ }
+ ```
+
+6. 选项有个hover效果,边框的颜色会变色。
+
+ ```css
+ input[type="radio"] + label:hover::before {
+ border-color: #b4a078;
+ }
+ ```
+
+ 上面代码生效的时候,页面上的禁用的单选框也出现了效果,所以,我们需要设置的是非禁用状态下的情况:
+
+ ```css
+ input[type="radio"]:not(:disabled) + label:hover::before {
+ border-color: #b4a078;
+ }
+ ```
+
+7. 禁用状态下的样式处理。首先在鼠标的手势上,我们做些修改。然后虚拟选择框的背景色也需要修改。禁用状态,我们使用伪类`:disabled`来匹配input元素。
+
+ ```css
+ input[type="radio"]:disabled + label {
+ cursor: not-allowed;
+ color: #999;
+ }
+ input[type="radio"]:disabled + label::before {
+ background-color: #f2f2f2;
+ }
+ input[type="radio"]:disabled + label::after {
+ background-color: #f2f2f2;
+ }
+ ```
+
+ 禁用状态下,选中元素的样式也不一样。这个时候,我们发现,我们需要用两个伪类作用在input元素上。可以像下面的写法:
+
+ ```css
+ input[type="radio"]:disabled:checked + label::before {
+ border-color: #ccc;
+ }
+ input[type="radio"]:disabled:checked + label::after {
+ background-color: #ccc;
+ }
+ ```
+
+ > 这样子的写法有时会出现一些意想不到的问题。推荐使用js方式,给元素添加一个类来处理。
+
+ 纯css的写好还可以用下面方式:
+
+ ```css
+ input[type="radio"]:disabled:is(:checked) + label::before {
+ border-color: #ccc;
+ }
+ input[type="radio"]:disabled:is(:checked) + label::after {
+ background-color: #ccc;
+ }
+ ```
+
+ > `:is()`方法,有兼容性的问题。
+
+### 5.1 修改结构法
+
+上面的例子是直接在`label`标签内,添加伪元素来实现这个方法。我们也可以转换思路,修改页面结构的方式来实现相同的功能。
+
+```html
+
+
+
+ vue
+
+...
+```
+
+在这种结构里面,我们也是将input元素隐藏,然后使用`span.radio`来实现自定义单选框的样式。这样子的样式处理,我们常常会需要搭配js帮我添加表示状态的类。
+
+实现的方式根据每个人的理解,可能都会有所不同。我们在一开始无法实现最优解时,我们只需要将自己能够实现的方式写出来就可以。
+
+## 6. 自定义复选框
+
+
+
+HTML 结构如下:
+
+```html
+
+
+ Awesome
+
+ Iconfont
+
+ Lhammer
+
+ 禁用
+
+ 选中禁用
+
+```
+
+基本操作和`radio`是一样的。差别在于图形中间的勾选样式不一致。
+
+可以使用的方式:
+
+- 这个勾选图案可以使用iconfont,添加一个字体图标到`label`的`after`伪元素的`content`属性中。
+
+- 使用unicode来展示打钩的图形。
+
+- 还有一种便捷方式,使用输入软件,打印一个 `√` 的图片。
+
+- 使用一个边框,然后旋转这个边框也可以实现一个勾选效果。
+
+ ```css
+ label::after {
+ content: "";
+ width: 3px;
+ height: 7px;
+ border: 1px solid #fff;
+ border-top: 0;
+ border-left: 0;
+ transform: rotate(45deg);
+ }
+ ```
+
+- 选中状态的时候,这个勾选图标才显示。我们除了控制display属性外,我们还可以通过`scale(0)`将元素缩小最小即隐藏起来,选中状态时`scale(1)`。
+
+## 作业
+
+实现开关效果。
+
+
+
+点击按钮后,会有过渡效果实现切换。
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/close-open.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/close-open.png"
new file mode 100644
index 0000000000000000000000000000000000000000..84f15faeea095f508906c74097af2e38be1c1a62
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/close-open.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/fluid_fixed.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/fluid_fixed.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ceafec8dfdf43719a05dfefca635ee5c3f4f85ff
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/fluid_fixed.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-checkbox.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-checkbox.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ad615690fc354aaffc8ace0c40cbe257b649349d
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-checkbox.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-radio.png" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-radio.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b3b7f5ac1d4690b1d922e238cca20c4b0d90164
Binary files /dev/null and "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/courseware/images/utils/input-radio.png" differ
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/fluid-fixed.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/fluid-fixed.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cb5acadfa37fe7d1060453e5ee2e187610954a83
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/fluid-fixed.html"
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint inventore earum voluptatum quia atque placeat cumque ducimus ipsum esse magni! Hic velit veritatis quae quisquam facilis reprehenderit consectetur eligendi quasi? Error architecto nostrum sint explicabo. Culpa, ipsam eius quam, autem officia odio facilis doloribus et qui alias in quos iste.
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout1.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..609a9a6dcba3c337afbb0e111e7f9b86ba9f5c28
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout1.html"
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2b867ec34507a1e8361c7c8a0bba51379644211a
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/holy-grail-layout2.html"
@@ -0,0 +1,50 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-checkbox.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-checkbox.html"
new file mode 100644
index 0000000000000000000000000000000000000000..61df8ba126a0a1cad4487dc146f585fc4da65133
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-checkbox.html"
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ Awesome
+
+ Iconfont
+
+ Lhammer
+
+ 禁用
+
+ 选中禁用
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio.html"
new file mode 100644
index 0000000000000000000000000000000000000000..65dbcf068aa1c4b39fef9be1e3264cebfe0515dc
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio.html"
@@ -0,0 +1,101 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+ Vue
+
+ React
+
+ Angular
+
+ 禁用
+
+ 选中禁用
+
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio2.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a04219ab62149c0075a7b408784dcfba6d304532
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/input-radio2.html"
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ Vue
+
+ React
+
+ Angular
+
+ 禁用
+
+ 选中禁用
+
+
+
\ No newline at end of file
diff --git "a/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/text-overflow.html" "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/text-overflow.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8ca4492592365324ba3168ed31fbccd45b8a6170
--- /dev/null
+++ "b/\345\274\240\346\260\270\345\213\207/H5+csss3\346\211\200\346\234\211\344\275\234\344\270\232/h5+css3_17/example/text-overflow.html"
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+ Document
+
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illo qui esse voluptatem! Est facere quia fugit ullam itaque earum inventore eum nesciunt maiores aperiam voluptate iste molestias doloribus commodi fuga, odit nobis. Qui nobis aliquid unde tempora inventore, sequi facere, sit harum sed vitae ea porro repudiandae. Optio, consequatur porro.
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores neque enim architecto odio impedit eius amet eligendi numquam recusandae et cum magni perspiciatis, quos libero velit hic nulla ex facilis dicta veniam placeat fuga! Vero repellendus deleniti, iusto dolorum nesciunt laboriosam repudiandae molestiae, neque eaque incidunt, accusantium laborum libero perspiciatis itaque cum dolorem voluptatem rerum blanditiis nisi et inventore. Quis dignissimos, ullam, doloribus neque at sit, velit in expedita libero voluptates et mollitia rem. Recusandae vitae nisi quaerat voluptates asperiores provident, sint labore. Architecto expedita quod ad a deserunt dolorum eaque temporibus velit? Suscipit sapiente dolores incidunt iusto atque quasi illum. Quia id magni autem repellendus sequi at, et est nobis temporibus molestias reprehenderit recusandae ab provident laborum dolores explicabo ratione itaque, necessitatibus fugit natus. Minus repudiandae accusantium iste velit, modi, dolor molestias consequatur error earum accusamus minima quos! Sed architecto quidem, vel aspernatur porro officia eum minima accusantium, beatae praesentium corporis, neque molestiae. Laboriosam, quia ex? Perferendis repellat eos incidunt illum, placeat numquam aperiam id quo sed repudiandae. Voluptatum ad maxime aliquid voluptates earum, tenetur fugit eos iure facilis recusandae, quia dolores nihil, ducimus debitis adipisci quae blanditiis eum et repellat odio ipsa dicta? Neque assumenda aperiam quod hic.
+
+
\ No newline at end of file