添加 31-Card-Effect 源码

clxho · Sep 30, 2019 · 4df576b · 4df576b
1 parent c75bf8d
commit 4df576b
Show file tree

Hide file tree

Showing 7 changed files with 368 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@
 
 ## 📌简介说明：
 *  `Demo` 收集自**互联网平台**，包括但不限于 *Youtube*、*bilibili* 等。
-* 本仓库收录的所有 `Demo` 均为本人手敲，所以部分代码和视频中的 **不一致**，请知悉。
 * 由于 `Demo` 过多，在线预览可能加载过慢，强烈建议你下载本项目到本地预览查看。
 * 不同浏览器的兼容性不同，本仓库所有 `Demo` 在Chrome浏览器测试正常运行。
 
@@ -28,7 +27,7 @@
 ## 📌源码下载
 * 需要源码的可以在 **`src`** 目录下自行下载对应的源码压缩包(.rar)。
 * 你也可以 **`Clone or download`** 整个项目到本地运行查看。
-* 小白直接点击这里下载整个项目--->[**下载**](https://github.com/local-host-8080/demo-html-css/archive/master.zip)
+* 小白直接点击这里下载整个项目源码--->[**下载**](https://github.com/local-host-8080/demo-html-css/archive/master.zip)
 
 ## 📌想一起打卡学习？
 > 点击下方的传送门一起学习吧~
@@ -39,15 +38,14 @@
 * [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>
-
-* 如果你有发现内容错误、无法加载、加载失败等问题，欢迎在相应的视频评论区留言或者私信我。
+* 仓库代码为UP纯手敲学习，所以难免有错误，如果你有发现内容错误、无法加载、加载失败等问题，欢迎在相应的视频评论区留言或者私信我。
 
 ## ❤️Show Your Support
 * **Give a ⭐️ if this project helped you!**

diff --git a/css/style.css b/css/style.css
@@ -143,4 +143,49 @@ body{
 }
 .swiper-slide:nth-child(30) .sliderText{
 	background: #c33ada;
-}
+}
+.swiper-slide:nth-child(31) .sliderText{
+	background: #2196f3;
+}
+.swiper-slide:nth-child(32) .sliderText{
+	background: #e91e63;
+}
+.swiper-slide:nth-child(33) .sliderText{
+	background: #c3d41a;
+}
+.swiper-slide:nth-child(34) .sliderText{
+	background: #ff9800;
+}
+.swiper-slide:nth-child(35) .sliderText{
+	background: #c33ada;
+}
+.swiper-slide:nth-child(36) .sliderText{
+	background: #2196f3;
+}
+.swiper-slide:nth-child(37) .sliderText{
+	background: #e91e63;
+}
+.swiper-slide:nth-child(38) .sliderText{
+	background: #c3d41a;
+}
+.swiper-slide:nth-child(39) .sliderText{
+	background: #ff9800;
+}
+.swiper-slide:nth-child(40) .sliderText{
+	background: #c33ada;
+}
+.swiper-slide:nth-child(41) .sliderText{
+	background: #2196f3;
+}
+.swiper-slide:nth-child(42) .sliderText{
+	background: #e91e63;
+}
+.swiper-slide:nth-child(43) .sliderText{
+	background: #c3d41a;
+}
+.swiper-slide:nth-child(44) .sliderText{
+	background: #ff9800;
+}
+.swiper-slide:nth-child(45) .sliderText{
+	background: #c33ada;
+}
diff --git a/demo/31/css/style.css b/demo/31/css/style.css
@@ -0,0 +1,76 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+	font-family: 'Poppins', sans-serif;
+}
+body{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 100vh;
+	background: linear-gradient(#0f4675, #0f4675 50%, #fff 50%, #fff 100%);
+}
+.container{
+	width: 1100px;
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+}
+.container .box{
+	position: relative;
+	width: 320px;
+	background: #fff;
+	padding: 100px 40px 60px;
+	box-shadow: 0 15px 45px rgba(0,0,0,.1);
+}
+.container .box:before{
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #ff226d;
+	transform: scaleY(0);
+	transform-origin: top;
+	transition: transform 0.5s;
+}
+.container .box:hover:before{
+	transform: scaleY(1);
+	transform-origin: bottom;
+	transition: transform 0.5s;
+}
+.container .box h2{
+	position: absolute;
+	left: 40px;
+	top: 60px;
+	font-size: 4em;
+	font-weight: 800;
+	z-index: 1;
+	opacity: 0.1;
+	transition: 0.5s;
+}
+.container .box:hover h2{
+	opacity: 1;
+	color: #fff;
+	transform: translateY(-40px);
+}
+.container .box h3{
+	position: relative;
+	font-size: 1.5em;
+	z-index: 2;
+	color: #333;
+	transition: 0.5s;
+}
+.container .box p{
+	position: relative;
+	z-index: 2;
+	color: #555;
+	transition: 0.5s;
+}
+.container .box:hover h3,
+.container .box:hover p{
+	color: #fff;
+}
diff --git a/demo/31/index.html b/demo/31/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="Zh-CN">
+<head>
+  <meta charset="utf-8">
+  <title>31-Card-Effect</title>
+  <!-- Link CSS -->
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div class="container">
+		<div class="box">
+			<h2>01</h2>
+			<h3>Service One</h3>
+			<p>这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。<br>
+			―――于宙 《我们这一代人的困惑》
+			</p>
+		</div>
+		<div class="box">
+			<h2>02</h2>
+			<h3>Service Two</h3>
+			<p>这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。<br>
+			―――于宙 《我们这一代人的困惑》
+			</p>
+		</div>
+		<div class="box">
+			<h2>03</h2>
+			<h3>Service Three</h3>
+			<p>这些年一直在提醒自己一件事情，千万不要感动自己，大部分人看似努力，不过是愚蠢导致的。什么熬夜看书到天亮，连续几天只睡几小时，多久没放假了。如果这些东西也值得炫耀，那么富士康流水线上任何一个人都比你努力多了。人难免天生有自怜情绪，唯有时刻保持清醒，才能看清真正的价值在哪里。<br>
+			―――于宙 《我们这一代人的困惑》
+			</p>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/img/31-Card-Effect.jpg b/img/31-Card-Effect.jpg