vor 10 Monaten · 767ee2822d
--- a/css3/14.鼠标变小手.html
+++ b/css3/14.鼠标变小手.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>
			
 
				+    <style>
			
 
				+        #box {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: #00f;
			
 
				+            cursor: pointer;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css3/15.transition.html
+++ b/css3/15.transition.html
@@ -0,0 +1,38 @@
 
				+<!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>
			
 
				+        #box1 {
			
 
				+            width: 300px;
			
 
				+            height: 300px;
			
 
				+            background: #f00;
			
 
				+            transition: all 3s ease-in 2s;
			
 
				+        }
			
 
				+        #box1:hover {
			
 
				+            width: 500px;
			
 
				+            height: 500px;
			
 
				+            background: #00f;
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        transition 平滑的过渡 css的属性值在一定的时间区间内平滑地过渡。
			
 
				+        transition主要包含四个属性值：
			
 
				+        tranisition-property:all   表示要参与过渡的属性  all是默认值
			
 
				+        tranisition-duration:3s   表示动画持续的时长和速度曲线  默认值0（时长决定速度）
			
 
				+        tranisition-timing-function:linear  动画运动的方式类型
			
 
				+        （ease：默认值   linear:匀速运动  ease-in:表示由慢到快  ease-out:表示由快到慢  ease-in-out:慢快慢）
			
 
				+        tranisition-delay:1s    动画的延迟时间
			
 
				+
			
 
				+        IOS下safari渲染transition时出现闪屏问题，解决方法：
			
 
				+        backface-visibility:hidden;背面可见度
			
 
				+        display:none;的元素并不支持css3动画
			
 
				+
			
 
				+     -->
			
 
				+     <div id="box1"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css3/16.transform.html
+++ b/css3/16.transform.html
@@ -0,0 +1,66 @@
 
				+<!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-color: aqua;
			
 
				+            margin: 300px auto;
			
 
				+            /* transform: skewX(45deg); */
			
 
				+            /* transform: rotateZ(90deg); */
			
 
				+            /* transform: scale(2); */
			
 
				+            /* transform: translate(200px,-200px); */
			
 
				+            /* transform: scale3d(2,2,2); */
			
 
				+            /* transform: translateZ(10px); */
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        transform 用于实现变形（形变位不变）IE8及以下不支持
			
 
				+        元素本身的位置（大小、坐标）没有发生变化，并且不占位
			
 
				+        Transform：translate | scale | skew | rotate
			
 
				+        功能：transform主要是用来对元素进行2d或3d变换的
			
 
				+        Translate：是用来做位移的
			
 
				+        Scale：是用于缩放的
			
 
				+        Skew：是用于倾斜的
			
 
				+        Rotate：是用于旋转的
			
 
				+        直接使用以上属性是2d变换，在单词后面加上3d是做3d变换；
			
 
				+
			
 
				+        1.transform:skew();
			
 
				+        skew:用于完成倾斜（扭曲）
			
 
				+        deg：表示度数，默认情况下表示x轴倾斜
			
 
				+        x y 不区分大小写
			
 
				+        skew(15deg,30deg)两个参数表示x y轴同时变形
			
 
				+        skew不支持z轴。最多只能传两个参数
			
 
				+
			
 
				+        2.transform：rotate(45deg)  默认是Z轴
			
 
				+        rotate：用于旋转,单位deg
			
 
				+        transform：rotateX(45deg)沿x轴水平旋转
			
 
				+        transform：rotateY（45deg）沿Y轴垂直旋转
			
 
				+        transform：rotate3d(4个参数)   rotate3d(1 1 1,30deg);
			
 
				+        rotate3d后面必须指清旋转的3个方向
			
 
				+
			
 
				+        3.  transform:scale:表示缩放
			
 
				+            transform:scale(2)表示宽度和高度一起缩放
			
 
				+            transform:scaleX(2)=transform:scale(2,1):表示宽度为原来的2倍
			
 
				+            transform:scaleY(2)=transform:scale(1,2):表示高度为原来的2倍
			
 
				+            transform:scale3d(2,2,2)如果有3d限定 必须传3个参数
			
 
				+
			
 
				+        4.如果只有一个值，默认表示X轴位移
			
 
				+        X轴：正值表示向右移动，负值表示向左移动
			
 
				+        Y轴：正值表示向下移动，负值表示向上移动
			
 
				+        transform:translateX(300px)表示元素向右移动300px
			
 
				+        translateY(200px)==translate(0,200px)表示元素向下移动200px
			
 
				+        translate3d()括号中必须有3个参数：加快CPU的运行
			
 
				+        transform:translateZ();近大远小
			
 
				+
			
 
				+
			
 
				+     -->
			
 
				+     <div id="box"></div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css3/17.transform3d.html
+++ b/css3/17.transform3d.html
@@ -0,0 +1,53 @@
 
				+<!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>
			
 
				+        * {
			
 
				+            margin: 0;
			
 
				+            padding: 0;
			
 
				+        }
			
 
				+        body {
			
 
				+            perspective:1000px;
			
 
				+        }
			
 
				+        #box {
			
 
				+            width: 400px;
			
 
				+            height: 400px;
			
 
				+            background: yellow;
			
 
				+            margin: 100px auto;
			
 
				+            /* transform-origin:center center; */
			
 
				+            transform-style:preserve-3d;
			
 
				+            transform:perspective(1000px);
			
 
				+        }
			
 
				+        #box1 {
			
 
				+            width: 200px;
			
 
				+            height: 200px;
			
 
				+            background: plum;
			
 
				+            /* transform: rotateZ(40deg); */
			
 
				+            /* transform: rotate3d(1,0,1,40deg); */
			
 
				+            /* transform:translate3d(100px,100px,10px) */
			
 
				+            transform:scale3d(2,2,2)
			
 
				+        }
			
 
				+    </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+    <!-- 
			
 
				+        transform-style:preserve-3d;//开启3D透视
			
 
				+        transform:perspective(100px);//透视距离
			
 
				+        Transform-orgin：X,Y;
			
 
				+        功能：用来定义rotate旋转，skew倾斜和scale缩放的中心点；
			
 
				+        说明：X,Y可以是具体的数值，也可以是百分比还可以是，left，center，top，bottom
			
 
				+        1.左上角为(0,0)点 第一个参数代表x方向 第二个参数代表y方向;
			
 
				+        2.如果设置左上角或者中心位置也可以使用关键字;
			
 
				+        transiform-origin:left top;
			
 
				+        transiform-orign:center center;
			
 
				+
			
 
				+        1.Rotate3d旋转的时候，要加上单位deg度数，（1,1,1,45deg）X,Y,Z都旋转45deg，1是要旋转的意思，0是不旋转；
			
 
				+     -->
			
 
				+    <div id="box">
			
 
				+        <div id="box1"></div>
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/css3/18.animation.html
+++ b/css3/18.animation.html
@@ -0,0 +1,60 @@
 
				+<!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>
			
 
				+      #box1 {
			
 
				+        width: 200px;
			
 
				+        height: 200px;
			
 
				+        background: #f00;
			
 
				+        margin: 100px auto;
			
 
				+        animation: fun 3s linear 2s infinite normal forwards running;
			
 
				+      }
			
 
				+      @keyframes fun {
			
 
				+        0% {
			
 
				+            transform: scaleX(2);
			
 
				+            /* transform: rotate(45deg); */
			
 
				+        }
			
 
				+        20% {
			
 
				+            transform: scaleX(2.5);
			
 
				+            /* transform: rotate(60deg); */
			
 
				+        }
			
 
				+        50% {
			
 
				+            transform: scaleX(3);
			
 
				+            /* transform: rotate(90deg); */
			
 
				+        }
			
 
				+        70% {
			
 
				+            transform: scaleY(3);
			
 
				+        }
			
 
				+        100% {
			
 
				+            transform: scaleY(2);
			
 
				+            /* transform: rotate(-45deg); */
			
 
				+        }
			
 
				+      }
			
 
				+    </style>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <!-- 
			
 
				+        自执行 
			
 
				+        用于实现关键帧动画式的风格
			
 
				+        -webkit-animation：name  duration  tming  delay  interation-count direction
			
 
				+      1.animation-name 用来定义一个动画的名称，transition-name相同
			
 
				+　　　2.animation-duration 用来指定元素播放动画所持续的时间，单位s秒，其默认值是“0”；transition-duration 相同
			
 
				+　　　3.animation-timing-function：动画的播放方法，transition-easing相同
			
 
				+　　　4.animation-delay：默认值是0，用来指定元素动画的开始时间，即多久之后开始执行动画，transition-delay相同
			
 
				+　　　5.animation-interation-count：用来指定元素动画的循环次数，其可取值number为数字，其默认值为“1”，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）[关键帧动画的单位必须是百分比]
			
 
				+        }
			
 
				+        关键帧动画可以设置不同时段的百分比效果
			
 
				+
			
 
				+     -->
			
 
				+    <div id="box1"></div>
			
 
				+  </body>
			
 
				+</html>