há 1 ano atrás · 0a2ae9db75
--- a/day17/css/1.盒子水平垂直居中.css
+++ b/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;
			
 
				+}
			
--- a/day17/css/2.盒子水平垂直居中.css
+++ b/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;
			
 
				+}
			
--- a/day17/css/3.transform.css
+++ b/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)
			
 
				+*/
			
--- a/day17/css/4.transform3d.css
+++ b/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)
			
 
				+    */
			
 
				+}
			
--- a/day17/css/5.transition.css
+++ b/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动画
			
 
				+*/
			
 
				+
			
--- a/day17/html/1.盒子水平垂直居中.html
+++ b/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>
			
--- a/day17/html/2.盒子水平垂直居中.html
+++ b/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>
			
--- a/day17/html/3.transform.html
+++ b/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>
			
--- a/day17/html/4.transform3d.html
+++ b/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>
			
--- a/day17/html/5.transition.html
+++ b/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>
			
--- a/day17/js/5.transition.js
+++ b/day17/js/5.transition.js
@@ -0,0 +1,4 @@
 
				+var btn = document.getElementById("btn");
			
 
				+btn.onclick = function() {
			
 
				+    box.style.width = 500 + 'px';
			
 
				+}