本地添加音乐按钮

2023-10-12 03:00:30 +08:00
parent 81bd58c37a
commit cd6b0bc4e5
3 changed files with 158 additions and 17 deletions
--- a/public/cloud.html
+++ b/public/cloud.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Cloud Upload Icon</title>
+    <style>
+        .cloud-icon {
+            position: relative;
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            background-color: #fff;
+            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .cloud-icon::before,
+        .cloud-icon::after {
+            content: "";
+            position: absolute;
+            background-color: #fff;
+            border-radius: 50%;
+            opacity: 0.7;
+            animation: cloud 2s ease-in-out infinite;
+        }
+
+        .cloud-icon::before {
+            width: 80px;
+            height: 80px;
+            top: -30px;
+            left: -30px;
+        }
+
+        .cloud-icon::after {
+            width: 100px;
+            height: 100px;
+            top: -50px;
+            right: -50px;
+            animation-delay: 1s;
+        }
+
+        @keyframes cloud {
+            0% {
+                transform: translate(0, 0);
+            }
+            50% {
+                transform: translate(10px, -10px);
+            }
+            100% {
+                transform: translate(0, 0);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="cloud-icon"></div>
+</body>
+</html>