添加 30-Loading 源码

HeyYubadboy · Sep 10, 2019 · c75bf8d · c75bf8d
1 parent c20bd04
commit c75bf8d
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -17,9 +17,9 @@
 
 ## 📌简介说明：
 *  `Demo` 收集自**互联网平台**，包括但不限于 *Youtube*、*bilibili* 等。
-* 本仓库收录的所有 `Demo` 均为本人手敲，部分代码和视频中的 **不一致**，请知悉。
+* 本仓库收录的所有 `Demo` 均为本人手敲，所以部分代码和视频中的 **不一致**，请知悉。
 * 由于 `Demo` 过多，在线预览可能加载过慢，强烈建议你下载本项目到本地预览查看。
-* 不同浏览器的兼容性不同，本仓库所有 `Demo` 均在Chrome浏览器可以正常运行。
+* 不同浏览器的兼容性不同，本仓库所有 `Demo` 在Chrome浏览器测试正常运行。
 
 ## 📌在线预览
 > 建议你使用Chrome浏览器访问~
@@ -28,10 +28,6 @@
 ## 📌源码下载
 * 需要源码的可以在 **`src`** 目录下自行下载对应的源码压缩包(.rar)。
 * 你也可以 **`Clone or download`** 整个项目到本地运行查看。
-* 安装了 `git` 的朋友直接在 `git` 中输入以下Shell语句下载:
-```Shell
-git clone [email protected]:local-host-8080/demo-html-css.git
-```
 * 小白直接点击这里下载整个项目--->[**下载**](https://github.com/local-host-8080/demo-html-css/archive/master.zip)
 
 ## 📌想一起打卡学习？
@@ -40,16 +36,17 @@ git clone [email protected]:local-host-8080/demo-html-css.git
 * [x] [【网页设计】炫酷特效](https://space.bilibili.com/32683063/channel/detail?cid=84356)
 
 ## 📌可能用到的类库
-* [x] [JQuery](https://jquery.com/)
-* [x] [BootStrap](https://getbootstrap.com/)
-* [x] [FontAwesome](https://fontawesome.com/icons?d=gallery)
-* [x] …………
+* [x] [【JQuery】](https://jquery.com/)
+* [x] [【BootStrap】](https://getbootstrap.com/)
+* [x] [【FontAwesome】](https://fontawesome.com/icons?d=gallery)
+* [x]  …………
 
 ## 📌联系我
 > 快来关注我吧~
 * [**我的主页**](https://space.bilibili.com/32683063)
 
 <p align="center"><img src="img/AboutMe.jpg" alt="[末末爱折腾の二维码]"></p>
+
 * 如果你有发现内容错误、无法加载、加载失败等问题，欢迎在相应的视频评论区留言或者私信我。
 
 ## ❤️Show Your Support

diff --git a/demo/30/css/style.css b/demo/30/css/style.css
@@ -0,0 +1,55 @@
+body{
+	margin: 0;
+	padding: 0;
+}
+ul{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%.-50%);
+	display: flex;
+}
+ul li{
+	list-style: none;
+	width: 6px;
+	height: 20px;
+	background: #262626;
+	margin: 0 4px;
+	animation: animate .7s infinite alternate;
+}
+
+@keyframes animate{
+	0%{
+		transform: scaleY(1);
+	}
+	25%{
+		transform: scaleY(1);
+	}
+	50%{
+		transform: scaleY(1);
+	}
+	75%{
+		transform: scaleY(1);
+	}
+	100%{
+		transform: scaleY(3);
+	}
+}
+ul li:nth-child(1){
+	animation-delay: 0.1s;
+}
+ul li:nth-child(2){
+	animation-delay: 0.2s;
+}
+ul li:nth-child(3){
+	animation-delay: 0.3s;
+}
+ul li:nth-child(4){
+	animation-delay: 0.4s;
+}
+ul li:nth-child(5){
+	animation-delay: 0.5s;
+}
+ul li:nth-child(6){
+	animation-delay: 0.6s;
+}
diff --git a/demo/30/index.html b/demo/30/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="Zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>30-Loading</title>
+  <!-- Link CSS -->
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<ul>
+		<li></li>
+		<li></li>
+		<li></li>
+		<li></li>
+		<li></li>
+		<li></li>
+	</ul>
+</body>
+</html>
diff --git a/img/30-Loading.jpg b/img/30-Loading.jpg
diff --git a/index.html b/index.html
@@ -568,19 +568,19 @@ <h3>29-Pagination</h3>
 	    <div class="swiper-slide">
 			<div class="card">
 				<div class="sliderText">
-					<h3>调试模板30</h3>
+					<h3>30-Loading</h3>
 				</div>
 				<div class="demo-img">
-					<img src="">
+					<img src="img/30-Loading.jpg">
 				</div>
 				<div class="content">
 					<p>1. 请左右滑动选择不同卡片。如果你要获取源码，请记住图片上方的编号与名字。</p>
 					<p>2. 点击“获取源码”获取该项目源码。</p>
 					<p>3. 点击“效果演示”查看效果预览。</p>
 					<p>4. 点击“查看视频”一起打卡学习~</p><br>
 					<a href="https://github.com/local-host-8080/demo-html-css">获取源码</a>
-					<a href="demo/文件编号/index.html">效果演示</a>
-					<a href="#">查看视频</a>
+					<a href="demo/30/index.html">效果演示</a>
+					<a href="https://www.bilibili.com/video/av60768238">查看视频</a>
 				</div>
 			</div>
 	    </div>

diff --git a/src/30-Loading.rar b/src/30-Loading.rar