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

new

zsydgithub 2 年之前
父節點
a58493f310
當前提交
884bbc1e56
共有 10 個文件被更改，包括 355 次插入 和 0 次删除
分割檢視 顯示文件統計
  1. 38 0
      7_Css3/10_transform3D.html
  2. 38 0
      7_Css3/11_transition.html
  3. 31 0
      7_Css3/12_animation.html
  4. 30 0
      7_Css3/7_左侧固定 右侧自适应.html
  5. 32 0
      7_Css3/7_左侧固定 右侧自适应2.html
  6. 36 0
      7_Css3/7_左侧固定 右侧自适应3.html
  7. 30 0
      7_Css3/7_左侧固定 右侧自适应4.html
  8. 35 0
      7_Css3/8_水平垂直居中1.html
  9. 33 0
      7_Css3/8_水平垂直居中2.html
  10. 52 0
      7_Css3/9_transform.html

+ 38 - 0
7_Css3/10_transform3D.html
查看文件 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    body{
 
+      perspective: 800px;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      border: 1px dashed #000;
 
+      margin: 100px auto;
 
+      transform: rotateY(45deg);
 
+      /* 指定子元素在三维空间内 */
 
+      transform-style: preserve-3d;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      transform: rotateY(45deg);
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+</body>
 
+</html>

+ 38 - 0
7_Css3/11_transition.html
查看文件 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      /* 过度      属性  执行时间  运动的方式   延迟时间 */
 
+      transition: width 2s linear 2s;
 
+
 
+      /* transition-property */
 
+      /* 设置对象中参与过度的属性 */
 
+      /* transition-duration */
 
+      /* 设置对象过度的持续时间 */
 
+      /* transition-timing-function*/
 
+      /* 设置对象中过度的类型 */
 
+      /* transition-delay */
 
+      /* 设置对象延迟过度的时间 */
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <button id="btn1">btn</button>
 
+  <script>
 
+    var btn = document.getElementById('btn1')
 
+    var div1 = document.getElementById('div1')
 
+    btn.onclick = function(){
 
+      div1.style.width = 500 + 'px'
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 31 - 0
7_Css3/12_animation.html
查看文件 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      animation: run 5s linear 1s 2 forwards;
 
+    }
 
+    @keyframes run {
 
+      10% {
 
+        width: 800px;
 
+      }
 
+      50%{
 
+        width: 200px;
 
+      }
 
+      100%{
 
+        width: 1000px;
 
+      }
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>l

+ 30 - 0
7_Css3/7_左侧固定 右侧自适应.html
查看文件 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      float: left;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: green;
 
+      margin-left: 210px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 32 - 0
7_Css3/7_左侧固定 右侧自适应2.html
查看文件 

@@ -0,0 +1,32 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    body{
 
+      display: flex;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: green;
 
+      flex: 1;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 36 - 0
7_Css3/7_左侧固定 右侧自适应3.html
查看文件 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    body{
 
+      position: relative;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+      position: absolute;
 
+      left: 0;
 
+      top: 0;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: green;
 
+      margin-left: 210px;
 
+
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 30 - 0
7_Css3/7_左侧固定 右侧自适应4.html
查看文件 

@@ -0,0 +1,30 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div2{
 
+      height: 200px;
 
+      background: green;
 
+      margin-top: -200px;
 
+      margin-left: 210px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+  <div id="div2"></div>
 
+</body>
 
+</html>

+ 35 - 0
7_Css3/8_水平垂直居中1.html
查看文件 

@@ -0,0 +1,35 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    html,body{
 
+      height: 100%;
 
+    }
 
+    body{
 
+      background: #ccc;
 
+      position: relative;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      margin-left: -100px;
 
+      margin-top: -100px;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 33 - 0
7_Css3/8_水平垂直居中2.html
查看文件 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    *{
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+    html,body{
 
+      height: 100%;
 
+    }
 
+    body{
 
+      background: #ccc;
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: center;
 
+    }
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1"></div>
 
+</body>
 
+</html>

+ 52 - 0
7_Css3/9_transform.html
查看文件 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      border: 1px dashed #000;
 
+      margin: 100px auto;
 
+      /* 给父元素 加个视角 */
 
+      perspective: 800px;
 
+    }
 
+    #div2{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+      /* 指定对象的2D 旋转 */
 
+      /* transform:  rotate(30deg); */
 
+      /* 指定对象的2D 位移 */
 
+      /* 第一个参数 对应X轴  第二个参数  对应Y轴  如果第二个参数没有提供  默认为0 */
 
+      /* transform: translate(100px,100px); */
 
+      /* 指定对象的2D 缩放 */
 
+      /* transform: scale(2); */
 
+
 
+      /* 指定对象在X轴上的旋转角度 */
 
+      /* transform: rotateX(30deg); */
 
+      /* 指定对象在Y轴上的旋转角度 */
 
+      /* transform: rotateY(30deg); */
 
+      /* 指定对象在Z轴上的旋转角度 */
 
+      /* transform: rotateZ(30deg); */
 
+
 
+      /* transform: translateX(100px); */
 
+      /* transform: translateY(100px); */
 
+      /* transform: translateZ(100px); */
 
+
 
+      /* transform: scaleY(0.5); */
 
+      transform: scaleZ(0.5);
 
+
 
+
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+</body>
 
+</html>