add raindrop background

2025-12-05 18:21:09 +08:00
parent 99ad931059
commit 199d1ed6ef
7 changed files with 125 additions and 11 deletions
--- a/miniprogram/components/background/raindrop/index.less
+++ b/miniprogram/components/background/raindrop/index.less
@ -0,0 +1,35 @@
+/* components/background/raindrop/index.wxss */
+page {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+}
+
+.raindrops {
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	overflow: hidden;
+	position: absolute;
+	transform: rotate(3deg);
+
+	@keyframes rainFall {
+		from {
+			transform: translateY(-10px);
+		}
+	
+		to {
+			transform: translateY(100vh);
+		}
+	}
+
+	.raindrop {
+		top: 0;
+		width: 2px;
+		height: 30px;
+		opacity: .6;
+		position: absolute;
+		animation: rainFall linear infinite;
+		background: linear-gradient(180deg, transparent, var(--theme-content-rain));
+	}
+}