Startseite Erkunden Hilfe
Anmelden
lovecoding
/
W250913
10
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

admin

fengchuanyu vor 3 Stunden
Ursprung
0398af91c2
Commit
10efbf9438
3 geänderte Dateien mit 142 neuen und 0 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 63 0
      5_CSS3/4_3D效果.html
  2. 33 0
      5_CSS3/5_过度.html
  3. 46 0
      5_CSS3/练习1_时钟.html

+ 63 - 0
5_CSS3/4_3D效果.html
Datei anzeigen 

@@ -0,0 +1,63 @@
 
+<!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{
 
+            /* 观察者距离 */
 
+            perspective: 1000px;
 
+            /* perspective-origin 观察者位置 后边可以写两个值 一个横向 第二个纵向 */
 
+            /* perspective-origin: right bottom; */
 
+            /* perspective-origin: 100px 200px; */
 
+            perspective-origin: center;
 
+        }
 
+        .box{
 
+            width: 200px;
 
+            height: 200px;
 
+            border: 2px dashed black;
 
+            margin:100px auto;
 
+            position: relative;
 
+            /* transform-style: preserve-3d 当前元素内部所有的transform都以3d效果展示 */
 
+            transform-style: preserve-3d;
 
+        }
 
+        .box1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: red;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            transform: translateZ(-5px);
 
+        }
 
+        .box2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: blue;
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            transform: translateZ(5px);
 
+        }
 
+        .box3{
 
+            width: 200px;
 
+            height: 200px;
 
+            /* transform: rotateY(80deg); */
 
+            transform-style: preserve-3d;
 
+            transition: all 1s linear;
 
+        }
 
+        .box3:hover{
 
+            transform: rotateY(180deg);
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box">
 
+        <div class="box3">
 
+            <div class="box1"></div>
 
+            <div class="box2"></div>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 33 - 0
5_CSS3/5_过度.html
Datei anzeigen 

@@ -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: blue;
 
+            margin:100px auto;
 
+            /* transition 为元素添加过度效果 */
 
+            /* 后面有3个值 第一个控制过度的属性 第二个参数过度所需用时 第三个参数过度效果*/
 
+            /* transition: all 0.5s linear; */
 
+            /* transition-property 过度属性 */
 
+            transition-property: width;
 
+            /* transition-duration 过度时间 */
 
+            transition-duration: 1s;
 
+            /* transition-timing-function 过度效果 */
 
+            transition-timing-function: linear;
 
+        }
 
+        .box:hover{
 
+            /* transform: rotate(45deg); */
 
+            width: 100px;
 
+            height: 400px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="box"></div>
 
+</body>
 
+</html>

+ 46 - 0
5_CSS3/练习1_时钟.html
Datei anzeigen 

@@ -49,6 +49,31 @@
 
         .clock li:nth-child(5n+1){
 
         .clock li:nth-child(5n+1){
 
             height: 12px;
 
             height: 12px;
 
         } 
         } 
+        .hour,.minute,.seconds{
 
+            position: absolute;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            transform-origin: center bottom;
 
+        }
 
+        .hour{
 
+            width: 12px;
 
+            height: 120px;
 
+            background-color: red;
 
+            top: 80px;
 
+        }
 
+        .minute{
 
+            width: 8px;
 
+            height: 150px;
 
+            background-color: blue;
 
+            top: 50px;
 
+        }
 
+        .seconds{
 
+            width: 4px;
 
+            height: 180px;
 
+            background-color: green;
 
+            top: 20px;
 
+            /* transform: translateX(-50%) rotate(120deg); */
 
+        }
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -59,6 +84,9 @@
 
                 <li></li>
 
                 <li></li>
 
                 <li></li> -->
 
                 <li></li> -->
 
             </ul>
 
             </ul>
 
+            <div class="hour"></div>
 
+            <div class="minute"></div>
 
+            <div class="seconds"></div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <script>
 
     <script>
 
@@ -68,6 +96,24 @@
 
           str += "<li style='transform: rotate("+(i*6)+"deg);'></li>"  
           str += "<li style='transform: rotate("+(i*6)+"deg);'></li>"  
         }
 
         }
 
         oUl.innerHTML = str;
 
         oUl.innerHTML = str;
 
+
 
+        
+        var oSeconds = document.getElementsByClassName("seconds")[0];
 
+        var oMinute = document.getElementsByClassName("minute")[0];
 
+        var oHour = document.getElementsByClassName("hour")[0];
 
+
 
+        setInterval(function(){
 
+            var timer = new Date();
 
+            var seconds = timer.getSeconds();
 
+            var minute = timer.getMinutes();
 
+            var hour = timer.getHours();
 
+            console.log(hour);
 
+            oSeconds.style.transform = "translateX(-50%) rotate("+ (seconds*6) +"deg)";
 
+            oMinute.style.transform = "translateX(-50%) rotate("+ (minute*6) +"deg)";
 
+            oHour.style.transform = "translateX(-50%) rotate("+ (hour*30) +"deg)";
 
+
 
+        },1000);
 
+
 
     </script>
 
     </script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>