縮放螢幕按鈕優化

index.html

@@ -115,8 +115,8 @@
                                     </ul>
                                 </li>
                             </ul>
-                            <a onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-expand text-white me-3"></i></a>
-                            <a onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-compress text-white"></i></a>
+                            <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-expand text-white"></i></a>
+                            <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i class="fas fa-compress text-white"></i></a>
                         </div>
                         <div class="text-center">
                             <img style="filter: none; margin-top: 80px;" src="./img/AISpokesgirl.png" alt="">
@@ -136,7 +136,7 @@
             </div>
         </div>
 
-        <img style="position: absolute; bottom:0px; right:150px; width:40vw ;" src="./img/0.png" alt="">
+        <img id="wheel" style="position: absolute; bottom:0px; right:150px; width:40vw ;" src="./img/0.png" alt="">
         <img style="position: absolute; bottom:0px; right:50px; width:35vw ;" width="500" src="./img/Peggy_.png" alt="">
 
         <img class="homepage-line" src="/img/titleline.png" alt="">
@@ -159,13 +159,15 @@
     </script> -->
     <script src="js/lan.js"></script>
     <script>
-        var width =  window.screen.width
-        console.log(width)
+       var expandbtn = document.getElementById("expand");
+       var compressionbtn = document.getElementById("compression");
+
         // Using JavaScript to open the page in fullscreen mode
         var elem = document.documentElement;
         function openFullscreen() {
             if (elem.requestFullscreen) {
                 elem.requestFullscreen();
+                compressionbtn.style.display='inline';
             } else if (elem.webkitRequestFullscreen) { /* Safari */
                 elem.webkitRequestFullscreen();
             } else if (elem.msRequestFullscreen) { /* IE11 */
@@ -176,6 +178,8 @@
         function closeFullscreen() {
             if (document.exitFullscreen) {
                 document.exitFullscreen();
+                compressionbtn.style.display='none';
+
             } else if (document.webkitExitFullscreen) { /* Safari */
                 document.webkitExitFullscreen();
             } else if (document.msExitFullscreen) { /* IE11 */

style.css

@@ -708,6 +708,22 @@ p {
   font-size: 32px;
 }
 
+:-webkit-full-screen #expand {
+  display: none;
+}
+
+:-moz-full-screen #expand {
+  display: none;
+}
+
+:-ms-fullscreen #expand {
+  display: none;
+}
+
+:fullscreen #expand {
+  display: none;
+}
+
 @media screen and (max-width: 1280px) {
   :-webkit-full-screen .home-page {
     height: 100vh;
@@ -775,6 +791,10 @@ p {
   height: 33vh;
 }
 
+.home-page #compression {
+  display: none;
+}
+
 .home-page .homebutton-box {
   background-image: url(./img/BG_3png.png);
   background-size: cover;

style.scss

@@ -655,6 +655,9 @@ p {
   }
 }
 :fullscreen {
+  #expand{
+    display: none;
+  }
   .home-page {
     @media screen and(max-width:1280px) {
       height: 100vh;
@@ -680,6 +683,9 @@ p {
   .home-box {
     height: 33vh;
   }
+  #compression{
+    display: none;
+  }
   .homebutton-box {
     background-image: url(./img/BG_3png.png);
     background-size: cover;
@@ -723,12 +729,25 @@ p {
       bottom: 30px;
     }
   }
+  // #wheel{
+  //   animation-name: wheel;
+  //   animation-duration: 10s;
+  // }
+  
   // .paggy{
   //   position: relative;
   //   bottom:500px;
   // }
 }
 
+// @keyframes wheel {
+//  0%{
+//    transform: rotate(0);
+//  }
+//  100%{
+//   transform: rotate(10deg);
+// }
+// }
 // demo
 
 .demo-btn {