首頁 探索 說明
登入
lovecoding
/
vipAllDay
10
0
複刻 0
Files 問題管理 0 合併請求 0 Wiki
瀏覽代碼

动画

e 10 月之前
父節點
4b976effc9
當前提交
767ee2822d
共有 5 個文件被更改，包括 236 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 19 0
      css3/14.鼠标变小手.html
  2. 38 0
      css3/15.transition.html
  3. 66 0
      css3/16.transform.html
  4. 53 0
      css3/17.transform3d.html
  5. 60 0
      css3/18.animation.html

+ 19 - 0
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>

+ 38 - 0
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>

+ 66 - 0
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>

+ 53 - 0
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>

+ 60 - 0
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>