1 年之前 · 1e47b225e9
--- a/7_css3/15_transition.html
+++ b/7_css3/15_transition.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: red;
			
 
				+      transition: width 2s linear 2s;
			
 
				+      /* 
			
 
				+      transition-property 
			
 
				+      设置过度的属性
			
 
				+
			
 
				+      transition-duration
			
 
				+      持续时间
			
 
				+
			
 
				+      transition-timing-function
			
 
				+      过度的类型
			
 
				+
			
 
				+      ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
			
 
				+      linear - 规定从开始到结束具有相同速度的过渡效果
			
 
				+      ease-in -规定缓慢开始的过渡效果
			
 
				+      ease-out - 规定缓慢结束的过渡效果
			
 
				+      ease-in-out - 规定开始和结束较慢的过渡效果
			
 
				+      cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
			
 
				+
			
 
				+      transition-delay
			
 
				+      延迟时间
			
 
				+      */
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+  <button id="btn">点击</button>
			
 
				+  <script>
			
 
				+    var btn = document.getElementById('btn')
			
 
				+    var div1 = document.getElementById('div1')
			
 
				+
			
 
				+    btn.onclick = function(){
			
 
				+      div1.style.width = div1.offsetWidth + 500 +'px'
			
 
				+    }
			
 
				+
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/7_css3/16_animation.html
+++ b/7_css3/16_animation.html
@@ -0,0 +1,47 @@
 
				+<!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: run 5s ease 1s 2 forwards;
			
 
				+
			
 
				+      /* 
			
 
				+      
			
 
				+          属性	描述
			
 
				+          @keyframes	规定动画模式。
			
 
				+          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: 200px;
			
 
				+      }
			
 
				+      100%{
			
 
				+        width: 400px;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/7_css3/17_旋转的立方体.html
+++ b/7_css3/17_旋转的立方体.html
@@ -0,0 +1,86 @@
 
				+<!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;
			
 
				+    }
			
 
				+
			
 
				+    body {
			
 
				+      perspective: 1000px;
			
 
				+    }
			
 
				+
			
 
				+    #container {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      margin: 100px auto;
			
 
				+      transform-style: preserve-3d;
			
 
				+      position: relative;
			
 
				+      animation: run 2s linear infinite;
			
 
				+    }
			
 
				+
			
 
				+    #container div {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      position: absolute;
			
 
				+      opacity: 0.5;
			
 
				+      border: 1px solid #000;
			
 
				+    }
			
 
				+
			
 
				+    #div1 {
			
 
				+      background: url('image/a.jpg');
			
 
				+      transform: translateZ(100px);
			
 
				+    }
			
 
				+
			
 
				+    #div2 {
			
 
				+      background: url('image/b.jpg');
			
 
				+      transform: rotateY(180deg) translateZ(100px) 
			
 
				+      /* transform: translateZ(-100px) rotateY(180deg); */
			
 
				+    }
			
 
				+
			
 
				+    #div3 {
			
 
				+      background: url('image/c.jpg');
			
 
				+      transform: rotateY(-90deg) translateZ(100px);
			
 
				+    }
			
 
				+
			
 
				+    #div4 {
			
 
				+      background: url('image/d.jpg');
			
 
				+      transform: rotateY(90deg) translateZ(100px);
			
 
				+    }
			
 
				+
			
 
				+    #div5 {
			
 
				+      background: url('image/e.jpg');
			
 
				+      transform: rotateX(90deg) translateZ(100px);
			
 
				+    }
			
 
				+
			
 
				+    #div6 {
			
 
				+      background: url('image/f.jpg');
			
 
				+      transform: rotateX(-90deg) translateZ(100px);
			
 
				+    }
			
 
				+
			
 
				+    @keyframes run {
			
 
				+      100% {
			
 
				+        transform: rotateY(360deg);
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="container">
			
 
				+    <div id="div1"></div>
			
 
				+    <div id="div2"></div>
			
 
				+    <div id="div3"></div>
			
 
				+    <div id="div4"></div>
			
 
				+    <div id="div5"></div>
			
 
				+    <div id="div6"></div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/7_css3/image/.DS_Store
+++ b/7_css3/image/.DS_Store
--- a/7_css3/image/1.jpg
+++ b/7_css3/image/1.jpg
--- a/7_css3/image/10.jpg
+++ b/7_css3/image/10.jpg
--- a/7_css3/image/11.jpg
+++ b/7_css3/image/11.jpg
--- a/7_css3/image/12.jpg
+++ b/7_css3/image/12.jpg
--- a/7_css3/image/13.jpg
+++ b/7_css3/image/13.jpg
--- a/7_css3/image/14.jpg
+++ b/7_css3/image/14.jpg
--- a/7_css3/image/15.jpg
+++ b/7_css3/image/15.jpg
--- a/7_css3/image/16.jpg
+++ b/7_css3/image/16.jpg
--- a/7_css3/image/17.jpg
+++ b/7_css3/image/17.jpg
--- a/7_css3/image/18.jpg
+++ b/7_css3/image/18.jpg
--- a/7_css3/image/19.jpg
+++ b/7_css3/image/19.jpg
--- a/7_css3/image/2.jpg
+++ b/7_css3/image/2.jpg
--- a/7_css3/image/20.jpg
+++ b/7_css3/image/20.jpg
--- a/7_css3/image/21.jpg
+++ b/7_css3/image/21.jpg
--- a/7_css3/image/22.jpg
+++ b/7_css3/image/22.jpg
--- a/7_css3/image/23.jpg
+++ b/7_css3/image/23.jpg
--- a/7_css3/image/24.jpg
+++ b/7_css3/image/24.jpg
--- a/7_css3/image/3.jpg
+++ b/7_css3/image/3.jpg
--- a/7_css3/image/4.jpg
+++ b/7_css3/image/4.jpg
--- a/7_css3/image/5.jpg
+++ b/7_css3/image/5.jpg
--- a/7_css3/image/6.jpg
+++ b/7_css3/image/6.jpg
--- a/7_css3/image/7.jpg
+++ b/7_css3/image/7.jpg
--- a/7_css3/image/8.jpg
+++ b/7_css3/image/8.jpg
--- a/7_css3/image/9.jpg
+++ b/7_css3/image/9.jpg
--- a/7_css3/image/a.jpg
+++ b/7_css3/image/a.jpg
--- a/7_css3/image/b.jpg
+++ b/7_css3/image/b.jpg
--- a/7_css3/image/bg.jpg
+++ b/7_css3/image/bg.jpg
--- a/7_css3/image/c.jpg
+++ b/7_css3/image/c.jpg
--- a/7_css3/image/d.jpg
+++ b/7_css3/image/d.jpg
--- a/7_css3/image/e.jpg
+++ b/7_css3/image/e.jpg
--- a/7_css3/image/f.jpg
+++ b/7_css3/image/f.jpg