渐变色主题修改，新主题荧光文字

modified: gradient/index.css modified: gradient2/index.css new theme: tubeLightText
maotoumao · Jul 6, 2024 · 699e4b1 · 699e4b1
1 parent 729e3de
commit 699e4b1
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 12 deletions.
diff --git a/gradient/imgs/preview.png b/gradient/imgs/preview.png
diff --git a/gradient/index.css b/gradient/index.css
@@ -22,7 +22,6 @@
 
 /*音乐详情页背景*/
 .music-detail-background {
-  background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%) !important;
   mask-image: none !important;
   -webkit-mask-image: none !important;
 }

diff --git a/gradient2/index.css b/gradient2/index.css
@@ -5,34 +5,38 @@ background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
 }
 
 :root {
-  --textColor: #224B35 !important;
+  --textColor: #000 !important;
   --textSecondaryColor: #383838 !important;
-  --backgroundColor: rgb(133, 255, 189) !important;
+  --backgroundColor:  #ffffff  !important;
   --shadowColor: rgba(0, 0, 0, 0.15) !important;
   --dividerColor: #e8e8e8 !important;
   --maskColor: rgba(255, 255, 255, 0.3) !important;
-  --backdropColor: rgba(255,255,255) !important;
-  --primaryColor: #E48A77 !important;
-  --listHoverColor: rgba(255, 255, 255, 0.05) !important;
-  --listActiveColor: rgba(255, 255, 255, 0.1) !important;
-  --placeholderColor: rgba(255,255,255,30%) !important;
+  --primaryColor: #77e968 !important;
   --headerTextColor: black !important;
-
+  --listActiveColor: #14221452 !important;
 }
 
 /*音乐详情页背景*/
 .music-detail-background {
-background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%) !important;
 mask-image: none !important;
 -webkit-mask-image: none !important;
 }
 
 .header-container {
-  background-color: transparent !important;
+  background-color: #f1f1f1 !important;
 }
 
+
 .music-bar-container {
-  background-color: transparent !important;
+  background-color: #ffffff !important;
+}
+
+.app-container {
+  backdrop-filter: blur(2px);
+}
+
+.body-container {
+  background-color: rgba(128,128,128,0.1);
 }
 
 input+svg {

diff --git a/tubeLightText/config.json b/tubeLightText/config.json
@@ -0,0 +1,9 @@
+{
+    "name": "荧光文字倒影",
+    "preview": "@/imgs/preview.png",
+    "description": "文本需要在app.html里修改",
+    "author": "beef-potato",
+    "iframe":{
+        "app": "@/iframes/app.html"
+    }
+}
diff --git a/tubeLightText/iframes/app.html b/tubeLightText/iframes/app.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+    <head>
+        <title>tubelight text animation</title>
+        <!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
+         <style>
+            *
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial;
+}
+body
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #07252d;
+
+}
+h2
+{
+    position: absolute;
+    font-size: 6em;
+    letter-spacing: 15px;
+    color: #0e3742;
+    text-transform: uppercase;
+    width: 100%;
+    text-align: center;
+    /* -webkit-box-reflect: below 1px linear-gradient(tranparent, #0008); */
+    line-height: 0.70em;
+    outline: none;
+    animation: animate 5s linear infinite;
+
+}
+h2::before
+{
+    content: attr(data-text);
+    position: absolute;
+    top: 100%;
+
+    transform: rotateX(180deg) translateY(-1px);
+    opacity: 0.5;
+    background: linear-gradient(tranparent, #0008);
+    mix-blend-mode: screen;
+    outline: none;
+
+}
+@keyframes animate
+{
+    0%, 100%
+    {
+        color: #0e3742;
+        text-shadow: none;
+
+    }
+    50%, 70%
+    {
+     color: #fff;
+     text-shadow: 0 0 10px  #03bef4,
+     0 0 20px  #03bef4,
+     0 0 40px  #03bef4,
+     0 0 60px  #03bef4,
+     0 0 80px  #03bef4,
+     0 0 160px  #03bef4
+    }
+}
+         </style>
+
+    </head>
+    <body>
+        <h2  data-text="anything">MYGO!!!!!</h2>
+
+        <script>
+            document.querySelectorAll('h2').forEach(h2 => {
+                h2.setAttribute('data-text', h2.textContent);
+            });
+        </script>
+
+    </body>
+<html>
diff --git a/tubeLightText/iframes/style.css b/tubeLightText/iframes/style.css
@@ -0,0 +1,65 @@
+/* 不支持对css的链接？ */
+
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial;
+}
+body
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #07252d;
+
+}
+h2
+{
+    position: absolute;
+    font-size: 6em;
+    letter-spacing: 15px;
+    color: #0e3742;
+    text-transform: uppercase;
+    width: 100%;
+    text-align: center;
+    /* -webkit-box-reflect: below 1px linear-gradient(tranparent, #0008); */
+    line-height: 0.70em;
+    outline: none;
+    animation: animate 5s linear infinite;
+
+}
+h2::before
+{
+    content: attr(data-text);
+    position: absolute;
+    top: 100%;
+
+    transform: rotateX(180deg) translateY(-1px);
+    opacity: 0.5;
+    background: linear-gradient(tranparent, #0008);
+    mix-blend-mode: screen;
+    outline: none;
+
+}
+@keyframes animate
+{
+    0%, 100%
+    {
+        color: #0e3742;
+        text-shadow: none;
+
+    }
+    50%, 70%
+    {
+     color: #fff;
+     text-shadow: 0 0 10px  #03bef4,
+     0 0 20px  #03bef4,
+     0 0 40px  #03bef4,
+     0 0 60px  #03bef4,
+     0 0 80px  #03bef4,
+     0 0 160px  #03bef4
+    }
+}
diff --git a/tubeLightText/imgs/preview.png b/tubeLightText/imgs/preview.png
diff --git a/tubeLightText/index.css b/tubeLightText/index.css
@@ -0,0 +1,28 @@
+:root {
+    --primaryColor: #03bef4 !important; 
+    --dividerColor: rgba(0, 0, 0, 0.1) !important; 
+    --listHoverColor: rgba(0, 0, 0, 0.05) !important; 
+    --listActiveColor: rgba(0, 0, 0, 0.40) !important; 
+    --textColor: #fff !important; 
+    --maskColor: rgba(51, 51, 51, 0.2) !important; 
+    --shadowColor: rgba(0, 0, 0, 0.2) !important;
+    --backgroundColor: #07252d !important;
+    --placeholderColor: rgba(0,0,0,0.2) !important; 
+    }
+
+    .header-container, 
+    .music-bar-container {
+      background-color: transparent !important;
+    }
+
+    .body-container {
+      background-color: rgba(0, 0, 0, 0.15) !important;
+    }
+
+    /*音乐详情页背景*/
+    .music-detail-background {
+    mask-image: none !important;
+    -webkit-mask-image: none !important;
+    }
+
+