Home Explore Help
Sign In
lovecoding
/
W250511
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 1 week ago
parent
ddca56f7e7
commit
2c698e30c3
5 changed files with 138 additions and 0 deletions
Split View Show Diff Stats
  1. BIN
      .DS_Store
  2. 26 0
      5-CSS3/1_变形位移.html
  3. 32 0
      5-CSS3/2_垂直水平居中.html
  4. 47 0
      5-CSS3/3_变形旋转.html
  5. 33 0
      5-CSS3/4_变形缩放.html

BIN
.DS_Store
View File


+ 26 - 0
5-CSS3/1_变形位移.html
View File 

@@ -0,0 +1,26 @@
 
+<!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-color: red;
 
+            /* transform 表示变形 */
 
+            /* translate 表示位移 translateX横向 translateY纵向 */
 
+            /* transform: translateX(100px); */
 
+            /* transform: translateY(100px); */
 
+            /* translate（）两个属性第一个横向 第二纵向 */
 
+            /* transform: translate(100px,100px); */
 
+            /* 百分比 横向代表宽度。纵向代表高度 */
 
+            transform: translateX(50%);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 32 - 0
5-CSS3/2_垂直水平居中.html
View File 

@@ -0,0 +1,32 @@
 
+<!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: 400px;
 
+            height: 400px;
 
+            border:3px solid black;
 
+            position: relative;
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            /* margin-left: -100px;
 
+            margin-top: -100px; */
 
+            transform: translate(-50%,-50%); 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box1">
 
+        <div class="box2"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 47 - 0
5-CSS3/3_变形旋转.html
View File 

@@ -0,0 +1,47 @@
 
+<!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-color: red;
 
+            font-size: 30px;
 
+            font-weight: bold;
 
+            text-align: center;
 
+            line-height: 200px;
 
+            color: white;
 
+            /* rotate 旋转  deg 角度*/
 
+            /* transform: rotate(45deg); */
 
+            /* transform-origin: 旋转中心 原点。 */
 
+            /* transform-origin: left top; */
 
+            /* transform-origin: center center; */
 
+            /* 第一个值代表横向 第二值代表纵向 */
 
+            /* transform-origin: 100px 100px; */
 
+            transform-origin: 300px center;
 
+
 
+            transform: rotate(45deg);
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:2px solid black;
 
+            margin:300px auto;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="box2">
 
+        <div class="box">
 
+            10
 
+        </div>
 
+    </div>
 
+
 
+</body>
 
+
 
+</html>

+ 33 - 0
5-CSS3/4_变形缩放.html
View File 

@@ -0,0 +1,33 @@
 
+<!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>
 
+        .div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:3px dashed black;
 
+            margin:300px auto;
 
+
 
+        }
 
+        .div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+        }
 
+        .div2:hover{
 
+            /* width: 100px;
 
+            height: 100px; */
 
+            /* 缩放 括号中的值是缩放比例 */
 
+            transform: scale(0.5);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="div1">
 
+        <div class="div2"></div>
 
+    </div>
 
+</body>
 
+</html>