ホーム エクスプローラ ヘルプ
サインイン
lovecoding
/
W260426
8
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

admin

fengchuanyu 1 週間 前
親
e5c225ad46
コミット
da6b73718e
3 ファイル変更、165 行追加、16 行削除
一括表示 差分情報を表示
  1. 36 0
      5_CSS3/4_过渡.html
  2. 53 0
      5_CSS3/5_3D效果.html
  3. 76 16
      5_CSS3/练习题1_时钟.html

+ 36 - 0
5_CSS3/4_过渡.html
ファイルの表示 

@@ -0,0 +1,36 @@
 
+<!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;
 
+            /* transition 过渡效果 */
 
+            /* 第一个参数 表示过渡的属性（想让那个css属性过渡）all 表示所有属性都过渡 */
 
+            /* 第二个参数 表示过渡的时间（单位：秒） */
 
+            /* 第三个参数 表示过渡的曲线（linear 表示匀速过渡 ease 表示默认的过渡曲线 ease-in 表示先慢后快过渡 ease-out 表示先快后慢过渡 ease-in-out 表示先慢后快后慢过渡） */
 
+            /* transition: all 1s linear; */
 
+            /* transition-property 表示过渡的属性（想让那个css属性过渡）all 表示所有属性都过渡 */
 
+            transition-property: all;
 
+            /* transition-duration 表示过渡的时间（单位：秒） */
 
+            transition-duration: 1s;
 
+            /* transition-timing-function 表示过渡的曲线（linear 表示匀速过渡 ease 表示默认的过渡曲线 ease-in 表示先慢后快过渡 ease-out 表示先快后慢过渡 ease-in-out 表示先慢后快后慢过渡） */
 
+            transition-timing-function: linear;
 
+            /* transition-delay 表示过渡的延迟时间（单位：秒） */
 
+            transition-delay: 1s;
 
+        }
 
+        .box:hover{
 
+            width: 400px;
 
+            height: 400px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 53 - 0
5_CSS3/5_3D效果.html
ファイルの表示 

@@ -0,0 +1,53 @@
 
+<!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当做舞台大屏幕 */
 
+        body{
 
+            /* 3D效果需要设置透视距离(观众距离屏幕的间距) */
 
+            perspective: 1000px;
 
+        }
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border:2px dashed black;
 
+            position: relative;
 
+            margin: 100px auto;
 
+            transition:all 1s linear;
 
+            /* 3D效果需要设置3D空间 */
 
+            transform-style: preserve-3d;
 
+            /* transform: rotateY(50deg); */
 
+        }
 
+        .face-front,.face-back{
 
+            width: 100%;
 
+            height: 100%;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            
+        }
 
+        .face-front{
 
+            background-color: red;
 
+            /* translateZ 垂直于屏幕的轴 */
 
+            transform: translateZ(20px);
 
+        }
 
+        .face-back{
 
+            background-color: blue;
 
+            /* translateZ 垂直于屏幕的轴 */
 
+            transform: translateZ(-20px);
 
+        }
 
+        .box:hover{
 
+            transform: rotateY(180deg);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="face-front"></div>
 
+        <div class="face-back"></div>
 
+    </div>
 
+</body>
 
+</html>

+ 76 - 16
5_CSS3/练习题1_时钟.html
ファイルの表示 

@@ -1,45 +1,76 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+
 
 <head>
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
     <title>Document</title>
 
     <style>
 
     <style>
 
-        .box{
 
-           width: 404px;
 
-           height: 404px;
 
-           border:2px dashed black;
 
-           position: fixed;
 
-           top: 50%;
 
-           left: 50%;
 
-           transform: translate(-50%,-50%);
 
+        .box {
 
+            width: 404px;
 
+            height: 404px;
 
+            border: 2px dashed black;
 
+            position: fixed;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%, -50%);
 
         }
 
         }
 
-        .clock{
 
+
 
+        .clock {
 
             width: 400px;
 
             width: 400px;
 
             height: 400px;
 
             height: 400px;
 
             border: 2px solid black;
 
             border: 2px solid black;
 
             border-radius: 50%;
 
             border-radius: 50%;
 
             position: relative;
 
             position: relative;
 
         }
 
         }
 
-        .clock .tick-line{
 
+
 
+        .clock .tick-line {
 
             width: 2px;
 
             width: 2px;
 
-            height:6px;
 
+            height: 6px;
 
             background-color: black;
 
             background-color: black;
 
             position: absolute;
 
             position: absolute;
 
             left: 50%;
 
             left: 50%;
 
             transform: translateX(-50%);
 
             transform: translateX(-50%);
 
             transform-origin: center 200px;
 
             transform-origin: center 200px;
 
         }
 
         }
 
-        .clock .tick-line:nth-child(5n+1){
 
+
 
+        .clock .tick-line:nth-child(5n+1) {
 
             height: 12px;
 
             height: 12px;
 
         }
 
         }
 
+
 
         /* .clock .tick-line:nth-child(2){
 
         /* .clock .tick-line:nth-child(2){
 
             transform:translateX(-50%) rotate(6deg);
 
             transform:translateX(-50%) rotate(6deg);
 
             
             
             
             
         } */
 
         } */
 
+        .clock .pointer div{
 
+            position: absolute;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            transform-origin: center bottom;
 
+            transition: all 1s linear;
 
+        }
 
+        .clock .pointer .hour-pointer{
 
+            width: 20px;
 
+            height: 100px;
 
+            background-color: blue;
 
+            top:100px;
 
+        }
 
+        .clock .pointer .minute-pointer{
 
+            width: 10px;
 
+            height: 140px;
 
+            background-color: red;
 
+            top:60px;
 
+        }
 
+        .clock .pointer .second-pointer{
 
+            width: 6px;
 
+            height: 180px;
 
+            background-color: green;
 
+            top:20px;
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
+
 
 <body>
 
 <body>
 
     <div class="box">
 
     <div class="box">
 
         <div class="clock">
 
         <div class="clock">
 
@@ -49,24 +80,53 @@
 
                 <div class="tick-line"></div> -->
 
                 <div class="tick-line"></div> -->
 
             </div>
 
             </div>
 
             <!-- 指针 -->
 
             <!-- 指针 -->
 
-            <div class="pointer"></div>
 
+            <div class="pointer">
 
+                <!-- 小时指针 -->
 
+                <div class="hour-pointer"></div>
 
+                <!-- 分钟指针 -->
 
+                <div class="minute-pointer"></div>
 
+                <!-- 秒指针 -->
 
+                <div class="second-pointer"></div>
 
+            </div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <script>
 
     <script>
 
         // 获取元素
 
         // 获取元素
 
         var tick = document.querySelector(".tick");
 
         var tick = document.querySelector(".tick");
 
-
 
+        var hourPointer = document.querySelector(".hour-pointer");
 
+        var minutePointer = document.querySelector(".minute-pointer");
 
+        var secondPointer = document.querySelector(".second-pointer");
 
         // 循环创建刻度线
 
         // 循环创建刻度线
 
-        for(var i=0;i<60;i++){
 
+        for (var i = 0; i < 60; i++) {
 
             // 创建刻度线元素
 
             // 创建刻度线元素
 
             var line = document.createElement("div");
 
             var line = document.createElement("div");
 
             // 给刻度线元素添加类名
 
             // 给刻度线元素添加类名
 
             line.classList.add("tick-line");
 
             line.classList.add("tick-line");
 
             // 给刻度线元素添加角度
 
             // 给刻度线元素添加角度
 
-            line.style.transform = "translateX(-50%) rotate("+i*6+"deg)";
 
+            line.style.transform = "translateX(-50%) rotate(" + i * 6 + "deg)";
 
             // 给刻度线元素添加到刻度容器中
 
             // 给刻度线元素添加到刻度容器中
 
             tick.appendChild(line);
 
             tick.appendChild(line);
 
         }
 
         }
 
+
 
+        // 实现时钟的动画
 
+        setInterval(function(){
 
+            // 获取当前时间
 
+            var time = new Date();
 
+            // 获取当前时间的小时
 
+            var hour = time.getHours();
 
+            // 获取当前时间的分钟
 
+            var minute = time.getMinutes();
 
+            // 获取当前时间的秒
 
+            var second = time.getSeconds();
 
+           
+            // 计算秒针的角度
 
+            secondPointer.style.transform = "translateX(-50%) rotate(" + second * 6 + "deg)";
 
+            // 计算分钟针的角度
 
+            minutePointer.style.transform = "translateX(-50%) rotate(" + minute * 6 + "deg)";
 
+            // 计算小时针的角度
 
+            hourPointer.style.transform = "translateX(-50%) rotate(" + hour * 30 + "deg)";
 
+        },1000)
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
+
 
 </html>
 
 </html>