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

admin

fengchuanyu 1 week ago
parent
299ef6e33f
commit
7ad1ca5bce
8 changed files with 118 additions and 0 deletions
Unified View Show Diff Stats
  1. 33 0
      5_CSS3/7_渐变色.html
  2. BIN
      5_CSS3/img/a.jpg
  3. BIN
      5_CSS3/img/b.jpg
  4. BIN
      5_CSS3/img/c.jpg
  5. BIN
      5_CSS3/img/d.jpg
  6. BIN
      5_CSS3/img/e.jpg
  7. BIN
      5_CSS3/img/f.jpg
  8. 85 0
      5_CSS3/练习题3_旋转立方体.html

+ 33 - 0
5_CSS3/7_渐变色.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>
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            /* background-color: red; */
 
+            margin: 100px auto;
 
+            /* 线性渐变色 linear-gradient */
 
+            /* 语法：linear-gradient(角度,颜色1,颜色2,颜色3,....) */
 
+            /* background-image: linear-gradient(red,blue,yellow,green); */
 
+            /* 角度：0deg 从左到右渐变 */
 
+            /* background-image: linear-gradient(45deg,red,blue); */
 
+            /* top left right bottom */
 
+            /* to left 从右到左渐变  to right 从左到右渐变 .... */
 
+            /* background-image: linear-gradient(to top left,red,blue); */
 
+
 
+
 
+            /* 径向渐变色 radial-gradient */
 
+            /* 语法：radial-gradient(颜色1,颜色2,颜色3,....) */
 
+            background-image: radial-gradient(red,blue);
 
+            /* 径向渐变色默认从中心开始渐变 */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

BIN
5_CSS3/img/a.jpg
View File


BIN
5_CSS3/img/b.jpg
View File


BIN
5_CSS3/img/c.jpg
View File


BIN
5_CSS3/img/d.jpg
View File


BIN
5_CSS3/img/e.jpg
View File


BIN
5_CSS3/img/f.jpg
View File


+ 85 - 0
5_CSS3/练习题3_旋转立方体.html
View File 

@@ -0,0 +1,85 @@
 
+<!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>
 
+        body{
 
+            height: 100vh;
 
+            background-color: cornflowerblue;
 
+            perspective: 1000px;
 
+        }
 
+        .box{
 
+            width: 300px;
 
+            height: 300px;
 
+            border:3px dashed black;
 
+            position: fixed;
 
+            top: 50%;
 
+            left:50%;
 
+            transform: translate(-50%,-50%);
 
+            animation: play 5s linear infinite;
 
+        }
 
+        .box{
 
+            transform-style: preserve-3d;
 
+            /* transform:translate(-50%,-50%) rotateY(30deg); */
 
+        }
 
+        .box .face{
 
+            position: absolute;
 
+            top: 0;
 
+            left:0;
 
+            opacity: 0.5;
 
+        }
 
+
 
+        .box .face:first-child{
 
+            transform:translateZ(150px);
 
+        }
 
+        .box .face:nth-child(2){
 
+            transform: translateZ(-150px);
 
+        }
 
+        .box .face:nth-child(3){
 
+            transform:rotateY(90deg) translateZ(150px);
 
+        }
 
+        .box .face:nth-child(4){
 
+            transform:rotateY(90deg) translateZ(-150px);
 
+        }
 
+        .box .face:nth-child(5){
 
+            transform:rotateX(90deg) translateZ(150px);
 
+        }
 
+        .box .face:nth-child(6){
 
+            transform:rotateX(90deg) translateZ(-150px);
 
+        }
 
+
 
+        @keyframes play{
 
+            from{
 
+                transform:translate(-50%,-50%) rotateY(0);
 
+            }
 
+            to{
 
+                transform:translate(-50%,-50%) rotateY(360deg);
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="face">
 
+            <img src="./img/a.jpg" alt="img">
 
+        </div>
 
+        <div class="face">
 
+            <img src="./img/b.jpg" alt="img">
 
+        </div>
 
+        <div class="face">
 
+            <img src="./img/c.jpg" alt="img">
 
+        </div>
 
+        <div class="face">
 
+            <img src="./img/d.jpg" alt="img">
 
+        </div>
 
+        <div class="face">
 
+            <img src="./img/e.jpg" alt="img">
 
+        </div>
 
+        <div class="face">
 
+            <img src="./img/f.jpg" alt="img">
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>