新增图标UI透明底样式图标不可点击效果展示参考 #2 @GavinNovate 的代码

asundust · Aug 11, 2023 · e55747f · e55747f
1 parent 5bba475
commit e55747f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 52 deletions.
diff --git a/web/css/style.css b/web/css/style.css
@@ -3802,14 +3802,14 @@ ul li a strong {
 
 @media screen and (min-width: 960px) and (max-width: 1199px) {
     #wrap {
-        width: 1024px;
+        width: 1000px;
         height: 100vh;
     }
 }
 
 @media screen and (min-width: 768px) and (max-width: 959px) {
     #wrap {
-        width: 750px;
+        width: 670px;
         height: 100vh;
     }
 }
@@ -3857,7 +3857,7 @@ ul li a strong {
     }
 }
 
-@media only screen and (max-width: 479px) {
+@media only screen and (min-width: 350px) and (max-width: 479px) {
     #wrap {
         height: 100vh;
     }
@@ -3873,6 +3873,11 @@ ul li a strong {
         margin-top: 50px;
     }
 
+    .app ul li {
+        display: flex;
+        margin: 0 0 0 0;
+    }
+
     .app ul li a {
         width: 141px;
         height: 141px;
@@ -3889,16 +3894,44 @@ ul li a strong {
     }
 
     div ul li a strong {
-        width: 70px;
+        width: 96px;
     }
 
     ul li {
         list-style-type: none;
         float: left;
         margin: 0 0 15px 25px
     }
+
+    #footer {
+        height: unset;
+    }
+
+    .footer-contents {
+        position: unset;
+    }
+
+    .footer-contents .links .line {
+        margin-top: 20px;
+        margin-right: 10px;
+        margin-bottom: 10px;
+    }
+}
+
+@media only screen and (min-width: 350px) and (max-width: 479px) {
+    div ul li {
+        width: 25%;
+    }
 }
 
+@media only screen and (max-width: 349px) {
+    div ul li {
+        width: 33.33%;
+    }
+    body {
+        overflow: auto;
+    }
+}
 
 .text-js {
     opacity: 0;

diff --git a/web/index.html b/web/index.html
@@ -14,61 +14,29 @@
     <script src="js/particles.min.js"></script>
     <script src="js/font.js"></script>
     <title>NasHomeCloud</title>
-    <style type="text/css">
+    <style>
       /*背景图设置，设置路径在"css/style.css"下的3310行开始，默认关闭，开头为“body {”*/
       /*也可以直接打开下面注释直接覆盖原生的渐变色背景，建议打开背景图之后注释渐变色背景样式“background: linear-gradient(135deg, #00C4FF, #9D1BB2) no-repeat fixed;”和“font-family: 'Helvetica Neue', 'Microsoft Yahei', SimHei, sans-serif;”*/
       body {
         /*background-size: cover;*/
         /*background: url(img/background.jpg) no-repeat fixed center top;*/
       }
 
-      /*以下补充样式用于修复手机浏览下的一些体验*/
-      @media only screen and (max-width: 479px) {
-        div ul li {
-          display: flex;
-          margin: 0 0 0 0;
-        }
-
-        div ul li a {
-          width: 100%;
-        }
-
-        div ul li a img {
-          width: 100%;
-        }
-
-        div ul li a strong {
-          width: 100%;
-        }
-
-        #footer {
-          height: unset;
-        }
-
-        .footer-contents {
-          position: unset;
-        }
-
-        .footer-contents .links .line {
-          margin-top: 20px;
-          margin-right: 10px;
-          margin-bottom: 10px;
-        }
-      }
-
-      @media only screen and (max-width: 349px) {
-        div ul li {
-          width: 33.33%;
-        }
-        body {
-          overflow: auto;
-        }
+      .shake {
+        /*打开注释，可调整图标大小，可能会导致特定分辨率下的UI错乱*/
+        /*width: 100px;*/
+        /*height: 100px;*/
+        /*打开注释可以给图标套上一个透明底层框*/
+        /*border-radius: 20%;*/
+        /*border-width: 0;*/
+        /*box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);*/
       }
 
-      @media only screen and (min-width: 350px) and (max-width: 479px) {
-        div ul li {
-          width: 25%;
-        }
+      .disabled-link {
+        pointer-events: none; /* 阻止鼠标事件 */
+        opacity: 0.3; /* 降低透明度以表示禁用状态 */
+        text-decoration: none; /* 去除下划线效果 */
+        cursor: default; /* 更改鼠标光标 */
       }
     </style>
 </head>
@@ -209,7 +177,8 @@ <h1 class="text-js">Welcome</h1>
         <div class="app animated fadeInLeft" id="app">
             <ul>
                 <li>
-                    <a href="#" target="_blank">
+                    <!--添加“class="disabled-link"”属性可以禁用该图标-->
+                    <a href="#" target="_blank" class="disabled-link">
                         <img class="shake" src="img/png/AppStore.png"/>
                         <strong>我的博客</strong></a>
                 </li>
@@ -274,7 +243,8 @@ <h1 class="text-js">Welcome</h1>
         <div class="app animated fadeInRight" id="app1">
             <ul>
                 <li>
-                    <a href="#" target="_blank">
+                    <!--添加“class="disabled-link"”属性可以禁用该图标-->
+                    <a href="#" target="_blank" class="disabled-link">
                         <img class="shake" src="img/png/AppStore.png"/>
                         <strong>我的博客</strong></a>
                 </li>