Home Verkennen Help
Inloggen
lovecoding
/
W260426
8
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

admin

fengchuanyu 1 week geleden
bovenliggende
da6b73718e
commit
299ef6e33f
4 gewijzigde bestanden met toevoegingen van 114 en 0 verwijderingen
Gecombineerde weergave Toon Diff Stats
  1. 72 0
      5_CSS3/6_动画.html
  2. BIN
      5_CSS3/img/slider1.jpg
  3. BIN
      5_CSS3/img/slider2.jpg
  4. 42 0
      5_CSS3/练习题2_简易照片墙.html

+ 72 - 0
5_CSS3/6_动画.html
Bestand weergeven 

@@ -0,0 +1,72 @@
 
+<!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: 100px;
 
+            text-align: center;
 
+            line-height: 200px;
 
+            color: #fff;
 
+            font-weight: bold;
 
+            position: absolute;
 
+            top:0;
 
+            left:0;
 
+            /* 动画 animation */
 
+            /* animation 后面的参数为 动画名称 动画时间 动画曲线 动画延迟 动画次数 动画结束状态 (forwards 保持最后帧) */
 
+            /* animation: move 1s linear 2s 2 forwards ;  */
 
+            /* 动画名称 用来定义动画关键帧（动画名称） */
 
+            animation-name: move;
 
+            /* 动画时间 用来定义动画的持续时间 */
 
+            animation-duration: 1s;
 
+            /* 动画曲线 用来定义动画的运动轨迹 */
 
+            animation-timing-function: linear;
 
+            /* 动画延迟 用来定义动画的延迟时间 */
 
+            animation-delay: 2s;
 
+            /* 动画次数 用来定义动画的次数 infinite 无限循环 */
 
+            animation-iteration-count: infinite;
 
+            /* 动画结束状态 用来定义动画的结束状态 */
 
+            animation-fill-mode: forwards;
 
+
 
+        }
 
+        /* @keyframes 用来定义动画关键帧（动画名称） */
 
+        /* 这里动画名称可以任意起名字 */
 
+        /* 动画关键帧 用来定义动画的运动轨迹 */
 
+        /* 这里from和to是开始和结束 */
 
+       
+        @keyframes move{
 
+            /* from{
 
+                left:0;
 
+            }
 
+            
+            to{
 
+                left:200px;
 
+            } */
 
+
 
+            0%{
 
+                left:0;
 
+            }
 
+            50%{
 
+                left:100px;
 
+            }
 
+            100%{
 
+                top:100px;
 
+                background-color: blue;
 
+            }
 
+        }
 
+        .box:hover{
 
+            animation-play-state: paused;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        中
 
+    </div>
 
+</body>
 
+</html>

BIN
5_CSS3/img/slider1.jpg
Bestand weergeven


BIN
5_CSS3/img/slider2.jpg
Bestand weergeven


+ 42 - 0
5_CSS3/练习题2_简易照片墙.html
Bestand weergeven 

@@ -0,0 +1,42 @@
 
+<!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{
 
+            background-color: #ccc;
 
+            perspective: 1000px;
 
+            perspective-origin: center center;
 
+        }
 
+        .box{
 
+            width: 400px;
 
+            height: 400px;
 
+            border:3px dashed black;
 
+            margin:200px auto;
 
+            transform-style: preserve-3d;
 
+        }
 
+        .box img{
 
+            width: 100%;
 
+            transition: all 1s ease;
 
+        }
 
+        .box img:first-child{
 
+            transform: rotate(45deg);
 
+        }
 
+        .box img:last-child{
 
+            transform: rotate(-45deg);
 
+        }
 
+        .box img:hover{
 
+            transform: rotate(0) translateZ(500px);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <img src="./img/slider1.jpg" alt="img">
 
+        <img src="./img/slider2.jpg" alt="img">
 
+    </div>
 
+</body>
 
+</html>