1 年之前 · 0e323bc6b8
--- a/day17/css/6.animation.css
+++ b/day17/css/6.animation.css
@@ -0,0 +1,29 @@
 
				+* {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+#box {
			
 
				+    width: 200px;
			
 
				+    height: 200px;
			
 
				+    background: #00f;
			
 
				+    animation: run 2s linear 1s infinite normal forwards running;
			
 
				+}
			
 
				+
			
 
				+@keyframes run {
			
 
				+    form {
			
 
				+        width: 200px;
			
 
				+    }
			
 
				+    10% {
			
 
				+        width: 100px;
			
 
				+    }
			
 
				+    40% {
			
 
				+        width: 400px;
			
 
				+    }
			
 
				+    80% {
			
 
				+        width: 800px;
			
 
				+    }
			
 
				+    to {
			
 
				+        width: 600px;
			
 
				+    }
			
 
				+}
			
--- a/day17/css/7.旋转的立方体.css
+++ b/day17/css/7.旋转的立方体.css
@@ -0,0 +1,64 @@
 
				+* {
			
 
				+    margin: 0;
			
 
				+    padding: 0;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    /* 透视距离 */
			
 
				+    perspective: 1000px;
			
 
				+    /* transform: perspective(1000px); */
			
 
				+}
			
 
				+
			
 
				+#container {
			
 
				+    width: 200px;
			
 
				+    height: 200px;
			
 
				+    margin: 200px auto;
			
 
				+    position: relative;
			
 
				+    border: 1px solid #000;
			
 
				+    transform-style: preserve-3d;
			
 
				+    animation: run 3s linear infinite;
			
 
				+}
			
 
				+
			
 
				+#container div {
			
 
				+    width: 200px;
			
 
				+    height: 200px;
			
 
				+    position: absolute;
			
 
				+    opacity: .5;
			
 
				+    border: 1px solid #000;
			
 
				+}
			
 
				+
			
 
				+#box1 {
			
 
				+    background: url('../images/a.jpg');
			
 
				+    transform: translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+#box2 {
			
 
				+    background: url("../images/b.jpg");
			
 
				+    transform: rotateY(180deg)  translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+#box3 {
			
 
				+    background: url("../images/c.jpg");
			
 
				+    transform: rotateY(90deg) translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+#box4 {
			
 
				+    background: url("../images/d.jpg");
			
 
				+    transform: rotateY(-90deg) translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+#box5 {
			
 
				+    background: url("../images/e.jpg");
			
 
				+    transform: rotateX(90deg) translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+#box6 {
			
 
				+    background: url("../images/f.jpg");
			
 
				+    transform: rotateX(-90deg) translateZ(100px);
			
 
				+}
			
 
				+
			
 
				+@keyframes run {
			
 
				+    100% {
			
 
				+        transform: rotateY(360deg);
			
 
				+    }
			
 
				+}
			
--- a/day17/html/6.animation.html
+++ b/day17/html/6.animation.html
@@ -0,0 +1,49 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="../css/6.animation.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        animation
			
 
				+        自执行  用于实现"关键帧"动画式的风格
			
 
				+        animation：name  duration  timing-function delay  
			
 
				+                   interation-count direction fill-mode play-state 
			
 
				+
			
 
				+        @keyframes被称为关键帧，用于引出一个动画{
			
 
				+            开始帧（form == 0%）
			
 
				+            20%
			
 
				+            40%
			
 
				+            60%
			
 
				+            80%
			
 
				+            结束帧（to ==100%）
			
 
				+        }
			
 
				+        可以定义不同百分比的动画效果
			
 
				+
			
 
				+
			
 
				+        opacity用于引入淡入淡出的动画（0-1之间的小数）
			
 
				+
			
 
				+
			
 
				+        animation-name:第一个参数表示动画的名称/none为默认值 当为none时不引用任何动画名称；
			
 
				+        animation-duration:2s 动画持续的时长
			
 
				+        animation-timing-function 动画的类型方式
			
 
				+            ease：默认值	规定慢速开始，然后变快，然后慢速结束的过渡效果
			
 
				+            linear:匀速运动  
			
 
				+            ease-in:表示由慢到快  
			
 
				+            ease-out:表示由快到慢 
			
 
				+            ease-in-out:规定以慢速开始和结束的过渡效果
			
 
				+        animation-delay:动画的延迟时间；
			
 
				+        animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
			
 
				+        animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
			
 
				+        animation-fill-mode:  用于设置动画结束后的停留点（forwards:表示停留在最后一个点上  backwards:表示停留在第一个点上  默认值:none  both:介于最后和开始之间/动画结束或开始的状态）
			
 
				+        animation-play-state: paused(动画已暂停)|running(动画正在播放);
			
 
				+        关键帧动画必须由@keyframes来引出
			
 
				+
			
 
				+
			
 
				+     -->
			
 
				+     <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/day17/html/7.旋转的立方体.html
+++ b/day17/html/7.旋转的立方体.html
@@ -0,0 +1,19 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <link rel="stylesheet" href="../css/7.旋转的立方体.css">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="container">
			
 
				+        <div id="box1"></div>
			
 
				+        <div id="box2"></div>
			
 
				+        <div id="box3"></div>
			
 
				+        <div id="box4"></div>
			
 
				+        <div id="box5"></div>
			
 
				+        <div id="box6"></div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/day17/images/.DS_Store
+++ b/day17/images/.DS_Store
--- a/day17/images/1.jpg
+++ b/day17/images/1.jpg
--- a/day17/images/10.jpg
+++ b/day17/images/10.jpg
--- a/day17/images/11.jpg
+++ b/day17/images/11.jpg
--- a/day17/images/12.jpg
+++ b/day17/images/12.jpg
--- a/day17/images/13.jpg
+++ b/day17/images/13.jpg
--- a/day17/images/14.jpg
+++ b/day17/images/14.jpg
--- a/day17/images/15.jpg
+++ b/day17/images/15.jpg
--- a/day17/images/16.jpg
+++ b/day17/images/16.jpg
--- a/day17/images/17.jpg
+++ b/day17/images/17.jpg
--- a/day17/images/18.jpg
+++ b/day17/images/18.jpg
--- a/day17/images/19.jpg
+++ b/day17/images/19.jpg
--- a/day17/images/2.jpg
+++ b/day17/images/2.jpg
--- a/day17/images/20.jpg
+++ b/day17/images/20.jpg
--- a/day17/images/21.jpg
+++ b/day17/images/21.jpg
--- a/day17/images/22.jpg
+++ b/day17/images/22.jpg
--- a/day17/images/23.jpg
+++ b/day17/images/23.jpg
--- a/day17/images/24.jpg
+++ b/day17/images/24.jpg
--- a/day17/images/3.jpg
+++ b/day17/images/3.jpg
--- a/day17/images/4.jpg
+++ b/day17/images/4.jpg
--- a/day17/images/5.jpg
+++ b/day17/images/5.jpg
--- a/day17/images/6.jpg
+++ b/day17/images/6.jpg
--- a/day17/images/7.jpg
+++ b/day17/images/7.jpg
--- a/day17/images/8.jpg
+++ b/day17/images/8.jpg
--- a/day17/images/9.jpg
+++ b/day17/images/9.jpg
--- a/day17/images/a.jpg
+++ b/day17/images/a.jpg
--- a/day17/images/b.jpg
+++ b/day17/images/b.jpg
--- a/day17/images/bg.jpg
+++ b/day17/images/bg.jpg
--- a/day17/images/c.jpg
+++ b/day17/images/c.jpg
--- a/day17/images/d.jpg
+++ b/day17/images/d.jpg
--- a/day17/images/e.jpg
+++ b/day17/images/e.jpg
--- a/day17/images/f.jpg
+++ b/day17/images/f.jpg