1 year ago · a31cad8a0c
--- a/CSS3/10_transition.html
+++ b/CSS3/10_transition.html
@@ -0,0 +1,45 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: red;
			
 
				+      transition: width 2s linear 2s;
			
 
				+      /* 
			
 
				+        transition-property	规定过渡效果所针对的 CSS 属性的名称。
			
 
				+        transition-duration	规定过渡效果要持续多少秒或毫秒。
			
 
				+        transition-timing-function	规定过渡效果的速度曲线。
			
 
				+        transition-delay	规定过渡效果的延迟（以秒计）。
			
 
				+
			
 
				+
			
 
				+        ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
			
 
				+        linear - 规定从开始到结束具有相同速度的过渡效果
			
 
				+        ease-in -规定缓慢开始的过渡效果
			
 
				+        ease-out - 规定缓慢结束的过渡效果
			
 
				+        ease-in-out - 规定开始和结束较慢的过渡效果
			
 
				+      */
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <button id="btn">按钮</button>
			
 
				+  <script>
			
 
				+    var btn = document.querySelector('#btn')
			
 
				+    var div1 = document.querySelector('#div1')
			
 
				+
			
 
				+    btn.onclick = function () {
			
 
				+      div1.style.width = div1.offsetWidth + 500 + 'px'
			
 
				+    }
			
 
				+  </script>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS3/11_animation.html
+++ b/CSS3/11_animation.html
@@ -0,0 +1,50 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    #div1 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: aqua;
			
 
				+      /* animation: name duration timing-function delay iteration-count direction fill-mode; */
			
 
				+      animation: run 5s ease 2s 2 forwards;
			
 
				+      /* 
			
 
				+        animation	设置所有动画属性的简写属性。
			
 
				+        animation-delay	规定动画开始的延迟。
			
 
				+        animation-direction	定动画是向前播放、向后播放还是交替播放。
			
 
				+        animation-duration	规定动画完成一个周期应花费的时间。
			
 
				+        animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
			
 
				+        animation-iteration-count	规定动画应播放的次数。
			
 
				+        animation-name	规定 @keyframes 动画的名称。
			
 
				+        animation-play-state	规定动画是运行还是暂停。
			
 
				+        animation-timing-function	规定动画的速度曲线。
			
 
				+      
			
 
				+      */
			
 
				+    }
			
 
				+
			
 
				+    @keyframes run {
			
 
				+      10% {
			
 
				+        width: 800px
			
 
				+      }
			
 
				+
			
 
				+      50% {
			
 
				+        width: 150px;
			
 
				+      }
			
 
				+
			
 
				+      100% {
			
 
				+        width: 400px
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS3/12_旋转的立方体.html
+++ b/CSS3/12_旋转的立方体.html
--- a/CSS3/8_transform.html
+++ b/CSS3/8_transform.html
@@ -0,0 +1,51 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    *{
			
 
				+      margin: 0;
			
 
				+      padding: 0;
			
 
				+    }
			
 
				+    #div1{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      border: 1px solid #000;
			
 
				+      margin: 100px auto;
			
 
				+      /* 给父元素加一个视角 */
			
 
				+      perspective: 800px;
			
 
				+    }
			
 
				+    #div2{
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: aqua;
			
 
				+
			
 
				+      /* 旋转 */
			
 
				+      /* transform: rotate(30deg); */
			
 
				+      /* transform: rotateX(30deg); */
			
 
				+      /* transform: rotateY(30deg); */
			
 
				+      /* transform: rotateZ(30deg); */
			
 
				+
			
 
				+      /* 位移 */
			
 
				+      /* transform: translate(100px,50px); */
			
 
				+      /* transform: translateX(100px); */
			
 
				+      /* transform: translateY(-100px); */
			
 
				+      /* transform: translateZ(100px); */
			
 
				+
			
 
				+      /* 缩放 */
			
 
				+      /* transform: scale(0.5); */
			
 
				+      /* transform: scaleX(0.5); */
			
 
				+      /* transform: scaleY(0.5); */
			
 
				+      transform: scaleZ(0.5);
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/CSS3/9_transform
+++ b/CSS3/9_transform
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>Document</title>
			
 
				+  <style>
			
 
				+    body{
			
 
				+      perspective: 10000px;
			
 
				+    }
			
 
				+    #div1 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      border: 1px solid #000;
			
 
				+      margin: 100px auto;
			
 
				+      transform: rotateY(45deg);
			
 
				+      transform-style: preserve-3d;
			
 
				+    }
			
 
				+
			
 
				+    #div2 {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background: aqua;
			
 
				+      transform: rotateY(45deg);
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS3/image/.DS_Store
+++ b/CSS3/image/.DS_Store
--- a/CSS3/image/1.jpg
+++ b/CSS3/image/1.jpg
--- a/CSS3/image/10.jpg
+++ b/CSS3/image/10.jpg
--- a/CSS3/image/11.jpg
+++ b/CSS3/image/11.jpg
--- a/CSS3/image/12.jpg
+++ b/CSS3/image/12.jpg
--- a/CSS3/image/13.jpg
+++ b/CSS3/image/13.jpg
--- a/CSS3/image/14.jpg
+++ b/CSS3/image/14.jpg
--- a/CSS3/image/15.jpg
+++ b/CSS3/image/15.jpg
--- a/CSS3/image/16.jpg
+++ b/CSS3/image/16.jpg
--- a/CSS3/image/17.jpg
+++ b/CSS3/image/17.jpg
--- a/CSS3/image/18.jpg
+++ b/CSS3/image/18.jpg
--- a/CSS3/image/19.jpg
+++ b/CSS3/image/19.jpg
--- a/CSS3/image/2.jpg
+++ b/CSS3/image/2.jpg
--- a/CSS3/image/20.jpg
+++ b/CSS3/image/20.jpg
--- a/CSS3/image/21.jpg
+++ b/CSS3/image/21.jpg
--- a/CSS3/image/22.jpg
+++ b/CSS3/image/22.jpg
--- a/CSS3/image/23.jpg
+++ b/CSS3/image/23.jpg
--- a/CSS3/image/24.jpg
+++ b/CSS3/image/24.jpg
--- a/CSS3/image/3.jpg
+++ b/CSS3/image/3.jpg
--- a/CSS3/image/4.jpg
+++ b/CSS3/image/4.jpg
--- a/CSS3/image/5.jpg
+++ b/CSS3/image/5.jpg
--- a/CSS3/image/6.jpg
+++ b/CSS3/image/6.jpg
--- a/CSS3/image/7.jpg
+++ b/CSS3/image/7.jpg
--- a/CSS3/image/8.jpg
+++ b/CSS3/image/8.jpg
--- a/CSS3/image/9.jpg
+++ b/CSS3/image/9.jpg
--- a/CSS3/image/a.jpg
+++ b/CSS3/image/a.jpg
--- a/CSS3/image/b.jpg
+++ b/CSS3/image/b.jpg
--- a/CSS3/image/bg.jpg
+++ b/CSS3/image/bg.jpg
--- a/CSS3/image/c.jpg
+++ b/CSS3/image/c.jpg
--- a/CSS3/image/d.jpg
+++ b/CSS3/image/d.jpg
--- a/CSS3/image/e.jpg
+++ b/CSS3/image/e.jpg
--- a/CSS3/image/f.jpg
+++ b/CSS3/image/f.jpg