首页 发现 帮助
登录
lovecoding
/
VIP26
9
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

day:17

e 1 年之前
父节点
07768ebb06
当前提交
0a2ae9db75
共有 11 个文件被更改，包括 212 次插入 和 0 次删除
合并视图 显示文件统计
  1. 18 0
      day17/css/1.盒子水平垂直居中.css
  2. 19 0
      day17/css/2.盒子水平垂直居中.css
  3. 30 0
      day17/css/3.transform.css
  4. 39 0
      day17/css/4.transform3d.css
  5. 28 0
      day17/css/5.transition.css
  6. 12 0
      day17/html/1.盒子水平垂直居中.html
  7. 12 0
      day17/html/2.盒子水平垂直居中.html
  8. 13 0
      day17/html/3.transform.html
  9. 23 0
      day17/html/4.transform3d.html
  10. 14 0
      day17/html/5.transition.html
  11. 4 0
      day17/js/5.transition.js

+ 18 - 0
day17/css/1.盒子水平垂直居中.css
查看文件 

@@ -0,0 +1,18 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+html,body {
 
+    height: 100%;
 
+}
 
+#box {
 
+    width: 400px;
 
+    height: 400px;
 
+    background: #f00;
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    /* 减去自身宽高的一半 */
 
+    margin-left: -200px;
 
+    margin-top: -200px;
 
+}

+ 19 - 0
day17/css/2.盒子水平垂直居中.css
查看文件 

@@ -0,0 +1,19 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+html,body {
 
+    height: 100%;
 
+}
 
+body {
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+}
 
+
 
+#box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #00f;
 
+}

+ 30 - 0
day17/css/3.transform.css
查看文件 

@@ -0,0 +1,30 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+
 
+#box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background-color: aqua;
 
+    margin: 100px auto;
 
+    transform: scale(2);
 
+    /* transform: rotate(180deg); */
 
+    /* transform: skew(60deg); */
 
+    /* transform: translate(100px,100px); */
 
+}
 
+#box1 {
 
+    width: 200px;
 
+    height: 200px;
 
+    border: 1px solid #000;
 
+    margin: 0 auto;
 
+    margin-top: -300px;
 
+}
 
+/* 
+    transition:对元素进行过渡
 
+    transform:对元素进行变形
 
+        1.位移:translate(X,Y) translateX/translateY
 
+        2.倾斜:skew(X,Y) skewX/skewY 不支持3d
 
+        3.旋转:rotate(X,Y) rotateX/rotateY
 
+        4.缩放:scale(X,Y) scaleX/scaleY scale(一个值也代表x,y)
 
+*/

+ 39 - 0
day17/css/4.transform3d.css
查看文件 

@@ -0,0 +1,39 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+body {
 
+    perspective: 1000px;
 
+}
 
+#box {
 
+    width: 400px;
 
+    height: 400px;
 
+    border: 1px solid #000;
 
+    /* background: #f00; */
 
+    margin: 100px auto;
 
+    transform-style: preserve-3d;
 
+    transform:perspective(1000px) ;
 
+    /* transform-origin:top left ;
 
+    transform: rotateX(45deg); */
 
+}
 
+
 
+#box1 {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #ff0;
 
+    /* transform: scale3d(2,2,2); */
 
+    /* transform: rotateZ(45deg) scaleZ(2); */
 
+    /* transform: scaleZ(0); */
 
+    /* transform: rotate3d(0.4,0.4,1,100deg); */
 
+    transform: translate3d(100px,100px,-100px);
 
+    /* transform: translateZ(-150px); */
 
+    /* 
+        transform 3d
 
+            1.translateZ 近大远小
 
+            translate3d()括号中必须有3个参数：加快CPU的运行
 
+            2.rotateZ() 单位deg
 
+            rotate3d(x,y,z,角度)
 
+            3.scaleZ() 缩放z轴比例 取值:0 到 1
 
+            scale3d(x,y,z)
 
+    */
 
+}

+ 28 - 0
day17/css/5.transition.css
查看文件 

@@ -0,0 +1,28 @@
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+}
 
+#box {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #00f;
 
+    transition: width 2s linear 1s;
 
+}
 
+
 
+/*  
+    transition主要包含四个属性值：
 
+    transition-property:all   表示要参与过渡的属性  all是默认值
 
+    transition-duration:3s   表示动画持续的时长和速度曲线  默认值0（时长决定速度）
 
+    transition-timing-function:linear  动画运动的方式类型
 
+       ease：默认值	规定慢速开始，然后变快，然后慢速结束的过渡效果
 
+       linear:匀速运动  
+       ease-in:表示由慢到快  
+       ease-out:表示由快到慢 
+       ease-in-out:规定以慢速开始和结束的过渡效果
 
+       cubic-bezier(n,n,n,n) 三次贝塞尔曲线
 
+    transition-delay:1s    动画的延迟时间
 
+    IOS下safari渲染transition时出现闪屏问题，解决方法：
 
+        backface-visibility:hidden;背面可见度
 
+        display:none;的元素并不支持css3动画
 
+*/
 
+

+ 12 - 0
day17/html/1.盒子水平垂直居中.html
查看文件 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/1.盒子水平垂直居中.css">
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+</body>
 
+</html>

+ 12 - 0
day17/html/2.盒子水平垂直居中.html
查看文件 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/2.盒子水平垂直居中.css">
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+</body>
 
+</html>

+ 13 - 0
day17/html/3.transform.html
查看文件 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/3.transform.css">
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <div id="box1"></div>
 
+</body>
 
+</html>

+ 23 - 0
day17/html/4.transform3d.html
查看文件 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/4.transform3d.css">
 
+</head>
 
+<body>
 
+    <div id="box">
 
+        <div id="box1"></div>
 
+    </div>
 
+    <!-- 
+        transform-origin:(X,Y) 
+            默认 (center,center)
 
+            可以是数字/百分比/top left bottom right
 
+            改变盒子的中心点
 
+            用于rotate skew scale
 
+        transform-style:preserve-3d;//开启3D透视
 
+        transform:perspective(800px - 1200px);//透视距离
 
+     -->
 
+</body>
 
+</html>

+ 14 - 0
day17/html/5.transition.html
查看文件 

@@ -0,0 +1,14 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="../css/5.transition.css">
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <button id="btn">放大</button>
 
+    <script src="../js/5.transition.js"></script>
 
+</body>
 
+</html>

+ 4 - 0
day17/js/5.transition.js
查看文件 

@@ -0,0 +1,4 @@
 
+var btn = document.getElementById("btn");
 
+btn.onclick = function() {
 
+    box.style.width = 500 + 'px';
 
+}