صفحهٔ اصلی گشت‌و‌گذار راهنما
ورود
lovecoding
/
Web1020
10
0
انشعاب 0
پرونده‌ها مشکلات 0 درخواست واکشی 0 ویکی
فهرست منبع

admin

fengchuanyu 3 ماه پیش
والد
87df38d6b4
کامیت
a599ddd6d5
3فایلهای تغییر یافته به همراه64 افزوده شده و 1 حذف شده
مشاهده تقسیم شده نمایش آمار تفاوت ها
  1. 31 0
      8_CSS3/4_CSS3过度.html
  2. 32 0
      8_CSS3/5_CSS3缩放.html
  3. 1 1
      8_CSS3/练习题1_时钟.html

+ 31 - 0
8_CSS3/4_CSS3过度.html
مشاهده فایل 

@@ -0,0 +1,31 @@
 
+<!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: 50px;
 
+            background-color: red;
 
+            /* transition:all 1s; */
 
+            /* transition-property: width, height; */
 
+            transition-property: all;
 
+            transition-duration: 0.5s;
 
+            /* transition-timing-function: linear; */
 
+            transition-timing-function: ease-in-out;
 
+            transition-delay: 1s;
 
+            
+        }
 
+        .box:hover{
 
+            width: 400px;
 
+            height: 100px;
 
+            background-color: blue;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 32 - 0
8_CSS3/5_CSS3缩放.html
مشاهده فایل 

@@ -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>
 
+        .box{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+            transition: all 1s;
 
+            position: absolute;
 
+           
+        }
 
+        body{
 
+            width: 100vw;
 
+            height: 100vh;
 
+            position: relative;
 
+        }
 
+        body:hover .box{
 
+            transform:scale(3);
 
+            position: absolute;
 
+            right: 0;
 
+            bottom: 0;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 1 - 1
8_CSS3/练习题1_时钟.html
مشاهده فایل 

@@ -109,7 +109,7 @@
 
             let hours = timer.getHours();
 
             oSeconds.style.transform = `translateY(20px) rotate(${seconds*6}deg)`;
 
             oMinutes.style.transform = `translateY(50px) rotate(${minutes*6}deg)`;
 
-            oHours.style.transform = `translateY(100px) rotate(${hours*30}deg)`;
 
+            oHours.style.transform = `translateY(100px) rotate(${hours*30+minutes/2}deg)`;
 
         },1000);
 
     </script>
 
 </body>