il y a 1 an · 0b6b82470f
--- a/css3/10_transform3D.html
+++ b/css3/10_transform3D.html
@@ -0,0 +1,41 @@
 
				+<!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: 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: orange;
			
 
				+      transform: rotateY(45deg);
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1">
			
 
				+    <div id="div2"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/css3/11_transition.html
+++ b/css3/11_transition.html
@@ -0,0 +1,46 @@
 
				+<!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	规定过渡效果的延迟（以秒计）。
			
 
				+
			
 
				+
			
 
				+
			
 
				+      linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
			
 
				+      ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
			
 
				+      ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
			
 
				+      ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
			
 
				+      ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
			
 
				+      */
			
 
				+    }
			
 
				+  </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/css3/12_animation.html
+++ b/css3/12_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: run 5s ease 1s 2 forwards;
			
 
				+
			
 
				+      /* 
			
 
				+      @keyframes    动画模式
			
 
				+      animation-name       名称
			
 
				+      animation-duration    执行事件
			
 
				+      animation-delay       延迟时间
			
 
				+      animation-iteration-count    执行次数
			
 
				+      animation-direction         向前播放  向后播放 循环播放
			
 
				+      animation-timing-function   速度曲线
			
 
				+      animation-fill-mode     没有播放时候的样式
			
 
				+      animation
			
 
				+      
			
 
				+      */
			
 
				+    }
			
 
				+
			
 
				+    @keyframes run {
			
 
				+      10% {
			
 
				+        width: 800px;
			
 
				+      }
			
 
				+
			
 
				+      50% {
			
 
				+        width: 200px;
			
 
				+      }
			
 
				+
			
 
				+      100% {
			
 
				+        width: 400px;
			
 
				+      }
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <div id="div1"></div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/css3/13_旋转立方体.html
+++ b/css3/13_旋转立方体.html
@@ -1,73 +0,0 @@
 
				-<!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: 700px;
			
 
				-    }
			
 
				-    #container{
			
 
				-      width: 200px;
			
 
				-      height: 200px;
			
 
				-      margin: 100px auto;
			
 
				-      transform-style: preserve-3d;
			
 
				-      position: relative;
			
 
				-      animation: run 3s linear infinite;
			
 
				-    }
			
 
				-    #container div{
			
 
				-      width: 200px;
			
 
				-      height: 200px;
			
 
				-      border: 1px solid #000;
			
 
				-      opacity: 0.5;
			
 
				-      position: absolute;
			
 
				-    }
			
 
				-    #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: translateX(-100px) rotateY(-90deg);
			
 
				-    }
			
 
				-    #div4{
			
 
				-      background: url('image/d.jpg');
			
 
				-      transform: translateX(100px) rotateY(90deg);
			
 
				-    }
			
 
				-    #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/css3/9_transform.html
+++ b/css3/9_transform.html
@@ -0,0 +1,54 @@
 
				+<!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: translate(100px,50px); */
			
 
				+      /* 缩放 */
			
 
				+      /* transform: scale(0.5); */
			
 
				+
			
 
				+
			
 
				+      /* transform: rotateX(30deg); */
			
 
				+      /* transform: rotateY(30deg); */
			
 
				+      /* transform: rotateZ(30deg); */
			
 
				+
			
 
				+      /* transform: translateX(50px); */
			
 
				+      /* transform: translateY(50px); */
			
 
				+      /* transform: translateZ(50px); */
			
 
				+
			
 
				+
			
 
				+      /* 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/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