2 minggu lalu · 303e01240b
--- a/5.css3/13.animation.html
+++ b/5.css3/13.animation.html
@@ -0,0 +1,71 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        #box {
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            background: aqua;
			
 
				+            animation: run 5s linear 2s 2  forwards running;
			
 
				+        }
			
 
				+        @keyframes run{
			
 
				+            0% {
			
 
				+                transform: rotateZ(0deg);
			
 
				+            }
			
 
				+            20% {
			
 
				+                transform: rotateZ(20deg);
			
 
				+
			
 
				+            }
			
 
				+            40% {
			
 
				+                transform: rotateZ(50deg);
			
 
				+
			
 
				+            }
			
 
				+            50% {
			
 
				+                transform: rotateZ(80deg);
			
 
				+
			
 
				+            }
			
 
				+            60% {
			
 
				+                transform: rotateZ(120deg);
			
 
				+
			
 
				+            }
			
 
				+            80% {
			
 
				+                transform: rotateZ(160deg);
			
 
				+
			
 
				+            }
			
 
				+            to {
			
 
				+                transform: rotateZ(170deg);
			
 
				+
			
 
				+            }
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+     animation 动画
			
 
				+        自执行 ：用于实现关键帧动画式的风格
			
 
				+        -webkit-animation：name  duration  timing-function  delay  iteration-count direction fill-mode play-state
			
 
				+        1.animation-name 用来定义一个动画的名称，transition-name相同
			
 
				+        2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
			
 
				+        3.animation-timing-function：动画的播放方法，transition相同　　　
			
 
				+        4.animation-delay:动画的延迟时间；
			
 
				+        5.animation-iteration-count：具体数值;:动画执行的次数，infinite表示无限循环；
			
 
				+        6.animation-direction:；表示动画执行方向 alternate 表示正反交替（normal:表示正常状态） 反向：reverse；
			
 
				+        7.animation-fill-mode:  用于设置动画结束后的停留点（forwards:表示停留在最后一个点上  backwards:表示停留在第一个点上  默认值:none  both:介于最后和开始之间/动画结束或开始的状态）
			
 
				+        8.animation-play-state: paused(动画已暂停)|running(动画正在播放);
			
 
				+        ""关键帧动画必须由@keyframes来引出""
			
 
				+        @keyframes 动画名称(name){
			
 
				+        执行代码块（0%==from   100%==to）[关键帧动画的单位必须是百分比]
			
 
				+        }
			
 
				+        关键帧动画可以设置不同时段的百分比效果
			
 
				+
			
 
				+        transition与animation区别
			
 
				+
			
 
				+        transition: 过渡平滑的动画   最多4个参数  最少1个（all）
			
 
				+        animation:  关键帧	最长8个参数  最少2个
			
 
				+    -->
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/5.css3/14.transform3d.html
+++ b/5.css3/14.transform3d.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+    <title>Document</title>
			
 
				+    <style>
			
 
				+        body {
			
 
				+            perspective: 1000px;
			
 
				+        }
			
 
				+        #box {
			
 
				+            width: 400px;
			
 
				+            height: 400px;
			
 
				+            transform-style: preserve-3d;
			
 
				+             transform: perspective(1000px);
			
 
				+            /* transform-style: preserve-3d;
			
 
				+            transform: perspective(1000px); */
			
 
				+            border: 1px solid #000;
			
 
				+            margin: 0 auto;
			
 
				+        }
			
 
				+        #box1 {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #0f0;
			
 
				+            /* transform: rotate3d(1,1,1,30deg); */
			
 
				+            /* transform: scale3d(1,3,0); */
			
 
				+            transform: translate3d(100px,100px,200px);
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        transform:
			
 
				+            scale rotate translate
			
 
				+    -->
			
 
				+            <div id="box">
			
 
				+                <div id="box1"></div>
			
 
				+            </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/5.css3/images/1.jpg
+++ b/5.css3/images/1.jpg
--- a/5.css3/images/1.png
+++ b/5.css3/images/1.png
--- a/5.css3/images/10.jpg
+++ b/5.css3/images/10.jpg
--- a/5.css3/images/11.jpg
+++ b/5.css3/images/11.jpg
--- a/5.css3/images/12.jpg
+++ b/5.css3/images/12.jpg
--- a/5.css3/images/13.jpg
+++ b/5.css3/images/13.jpg
--- a/5.css3/images/14.jpg
+++ b/5.css3/images/14.jpg
--- a/5.css3/images/15.jpg
+++ b/5.css3/images/15.jpg
--- a/5.css3/images/16.jpg
+++ b/5.css3/images/16.jpg
--- a/5.css3/images/17.jpg
+++ b/5.css3/images/17.jpg
--- a/5.css3/images/18.jpg
+++ b/5.css3/images/18.jpg
--- a/5.css3/images/19.jpg
+++ b/5.css3/images/19.jpg
--- a/5.css3/images/2.jpg
+++ b/5.css3/images/2.jpg
--- a/5.css3/images/20.jpg
+++ b/5.css3/images/20.jpg
--- a/5.css3/images/21.jpg
+++ b/5.css3/images/21.jpg
--- a/5.css3/images/22.jpg
+++ b/5.css3/images/22.jpg
--- a/5.css3/images/23.jpg
+++ b/5.css3/images/23.jpg
--- a/5.css3/images/24.jpg
+++ b/5.css3/images/24.jpg
--- a/5.css3/images/3.jpg
+++ b/5.css3/images/3.jpg
--- a/5.css3/images/4.jpg
+++ b/5.css3/images/4.jpg
--- a/5.css3/images/5.jpg
+++ b/5.css3/images/5.jpg
--- a/5.css3/images/6.jpg
+++ b/5.css3/images/6.jpg
--- a/5.css3/images/7.jpg
+++ b/5.css3/images/7.jpg
--- a/5.css3/images/8.jpg
+++ b/5.css3/images/8.jpg
--- a/5.css3/images/9.jpg
+++ b/5.css3/images/9.jpg
--- a/5.css3/images/a.jpg
+++ b/5.css3/images/a.jpg
--- a/5.css3/images/b.jpg
+++ b/5.css3/images/b.jpg
--- a/5.css3/images/c.jpg
+++ b/5.css3/images/c.jpg
--- a/5.css3/images/d.jpg
+++ b/5.css3/images/d.jpg
--- a/5.css3/images/e.jpg
+++ b/5.css3/images/e.jpg
--- a/5.css3/images/f.jpg
+++ b/5.css3/images/f.jpg