From 0aa7a8e35a26df2f19980212a564fd9f80ac0125 Mon Sep 17 00:00:00 2001 From: wasrusgen Date: Wed, 13 May 2026 22:36:23 +0300 Subject: [PATCH] =?UTF-8?q?splash:=20=D1=8D=D1=84=D1=84=D0=B5=D0=BA=D1=82?= =?UTF-8?q?=D1=8B=20I=20+=20K=20=E2=80=94=20wobble=20=D0=BF=D0=B8=D0=BB?= =?UTF-8?q?=D1=8B=20+=20=D0=BE=D0=BF=D0=B8=D0=BB=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I: sawWobble — весь логотип покачивается ±1.5° каждые 5.5с (имитация работающего инструмента). Анимация на wrapper, чтобы не конфликтовать с breathing scale на самом SVG. K: splash-dust — 8 опилок-точек разлетаются от пилы по индивидуальным траекториям (--dx/--dy через CSS-vars), разные delays и durations для естественности. Cache bust v=20260513zk. --- miniapp/assets/styles.css | 43 +++++++++++++++++++++++++++++++++++++++ miniapp/index.html | 38 ++++++++++++++++++++++------------ 2 files changed, 68 insertions(+), 13 deletions(-) diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index 61555f2..5430ae5 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -219,6 +219,12 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: .loader-logo path { fill: var(--walnut, #6B4A2B); } /* Бренд @wasrusgen1 на splash — SVG-лого + CRM */ +.brand-logo-wrap { + position: relative; + display: inline-block; + animation: sawWobble 5.5s ease-in-out infinite; + transform-origin: 50% 35%; /* центр диска пилы */ +} .brand-logo { width: 70%; max-width: 260px; @@ -228,6 +234,43 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: animation: logoBreath 2.2s ease-in-out infinite; filter: drop-shadow(0 6px 16px rgba(44, 62, 80, 0.18)); } + +/* Опилки — точки летают вокруг пилы */ +.splash-dust { + position: absolute; + inset: -10% -20% -10% -20%; + pointer-events: none; +} +.splash-dust .dust { + position: absolute; + width: 3px; + height: 3px; + background: #2C3E50; + border-radius: 50%; + opacity: 0; + will-change: transform, opacity; +} +/* 8 точек с разными траекториями */ +.splash-dust .d1 { left: 30%; top: 50%; animation: dustFly 3.6s ease-out 0s infinite; --dx:-30px; --dy:-50px; } +.splash-dust .d2 { left: 35%; top: 45%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-50px; --dy:-30px; } +.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-60px; --dy:20px; } +.splash-dust .d4 { left: 40%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-20px; --dy:50px; } +.splash-dust .d5 { left: 65%; top: 55%; animation: dustFly 3.8s ease-out 0.6s infinite; --dx: 50px; --dy: 30px; } +.splash-dust .d6 { left: 60%; top: 50%; animation: dustFly 4.6s ease-out 1.0s infinite; --dx: 60px; --dy:-20px; } +.splash-dust .d7 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-50px; } +.splash-dust .d8 { left: 75%; top: 60%; animation: dustFly 4.0s ease-out 0.9s infinite; --dx: 70px; --dy: 40px; } + +@keyframes dustFly { + 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } + 15% { opacity: 0.55; } + 60% { opacity: 0.35; } + 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } +} + +@keyframes sawWobble { + 0%, 100% { transform: rotate(-1deg); } + 50% { transform: rotate(1.5deg); } +} .brand-tagline-gold { font-family: "Inter", system-ui, sans-serif; font-weight: 800; diff --git a/miniapp/index.html b/miniapp/index.html index 119c44c..5e17f92 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,25 +12,37 @@ - - + + - +
- +
+ + +
CRM
- - - - - - - - - + + + + + + + + +