From ec3929ae94ec32f4803e0860369c36c8b6c547a2 Mon Sep 17 00:00:00 2001 From: wasrusgen Date: Wed, 13 May 2026 22:46:53 +0300 Subject: [PATCH] =?UTF-8?q?splash:=20=D1=83=D0=B1=D1=80=D0=B0=D0=BB=20wobb?= =?UTF-8?q?le,=2016=20=D0=BE=D0=BF=D0=B8=D0=BB=D0=BE=D0=BA,=20=D0=B4=D0=BE?= =?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20=D0=B2=D1=80=D0=B0=D1=89=D0=B0?= =?UTF-8?q?=D1=8E=D1=89=D0=B8=D0=B9=D1=81=D1=8F=20=D0=B4=D0=B8=D1=81=D0=BA?= =?UTF-8?q?-=D0=BA=D0=BE=D0=BB=D1=8C=D1=86=D0=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Убрана анимация sawWobble — пила больше не качается - Опилки расширены с 8 до 16 (8 влево + 8 вправо от пилы) - Новый saw-rotor SVG поверх саблона: · кольцо с пунктиром (stroke-dasharray «3 4.5») · внутреннее тонкое кольцо (opacity 0.35) · вращается 3.5s/оборот линейно · позиция top:22% left:50% width:36% — над диском пилы Cache bust v=20260513zl. --- miniapp/assets/styles.css | 59 ++++++++++++++++++++++++++------------- miniapp/index.html | 47 +++++++++++++++++-------------- 2 files changed, 65 insertions(+), 41 deletions(-) diff --git a/miniapp/assets/styles.css b/miniapp/assets/styles.css index 5430ae5..2ccefb5 100644 --- a/miniapp/assets/styles.css +++ b/miniapp/assets/styles.css @@ -222,8 +222,6 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: .brand-logo-wrap { position: relative; display: inline-block; - animation: sawWobble 5.5s ease-in-out infinite; - transform-origin: 50% 35%; /* центр диска пилы */ } .brand-logo { width: 70%; @@ -235,10 +233,28 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: filter: drop-shadow(0 6px 16px rgba(44, 62, 80, 0.18)); } -/* Опилки — точки летают вокруг пилы */ +/* Вращающийся диск-кольцо поверх саблона. + Позиция и размер подобраны под расположение диска пилы в лого. */ +.saw-rotor { + position: absolute; + top: 22%; /* центр диска пилы примерно тут */ + left: 50%; + width: 36%; + aspect-ratio: 1 / 1; + transform: translate(-50%, -50%); + pointer-events: none; + opacity: 0.55; + animation: rotorSpin 3.5s linear infinite; +} +@keyframes rotorSpin { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } +} + +/* Опилки — 16 точек летают вокруг пилы */ .splash-dust { position: absolute; - inset: -10% -20% -10% -20%; + inset: -10% -25% -10% -25%; pointer-events: none; } .splash-dust .dust { @@ -250,26 +266,29 @@ button { font: inherit; cursor: pointer; border: none; background: none; color: 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; } +/* 16 точек с разными траекториями (8 влево, 8 вправо) */ +.splash-dust .d1 { left: 30%; top: 45%; animation: dustFly 3.6s ease-out 0.0s infinite; --dx:-30px; --dy:-55px; } +.splash-dust .d2 { left: 35%; top: 50%; animation: dustFly 4.2s ease-out 0.4s infinite; --dx:-55px; --dy:-30px; } +.splash-dust .d3 { left: 25%; top: 55%; animation: dustFly 3.2s ease-out 0.8s infinite; --dx:-65px; --dy: 15px; } +.splash-dust .d4 { left: 32%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx:-25px; --dy: 55px; } +.splash-dust .d5 { left: 38%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx:-40px; --dy:-70px; } +.splash-dust .d6 { left: 20%; top: 50%; animation: dustFly 3.8s ease-out 1.1s infinite; --dx:-70px; --dy:-15px; } +.splash-dust .d7 { left: 28%; top: 65%; animation: dustFly 4.4s ease-out 0.5s infinite; --dx:-50px; --dy: 40px; } +.splash-dust .d8 { left: 22%; top: 38%; animation: dustFly 3.5s ease-out 0.9s infinite; --dx:-60px; --dy:-65px; } +.splash-dust .d9 { left: 70%; top: 45%; animation: dustFly 3.4s ease-out 0.3s infinite; --dx: 40px; --dy:-55px; } +.splash-dust .d10 { left: 65%; top: 50%; animation: dustFly 4.0s ease-out 0.7s infinite; --dx: 60px; --dy:-25px; } +.splash-dust .d11 { left: 75%; top: 55%; animation: dustFly 3.2s ease-out 1.0s infinite; --dx: 70px; --dy: 15px; } +.splash-dust .d12 { left: 68%; top: 60%; animation: dustFly 5.0s ease-out 0.2s infinite; --dx: 25px; --dy: 55px; } +.splash-dust .d13 { left: 62%; top: 40%; animation: dustFly 4.5s ease-out 0.6s infinite; --dx: 45px; --dy:-65px; } +.splash-dust .d14 { left: 80%; top: 50%; animation: dustFly 3.8s ease-out 0.1s infinite; --dx: 75px; --dy:-15px; } +.splash-dust .d15 { left: 72%; top: 65%; animation: dustFly 4.4s ease-out 0.4s infinite; --dx: 55px; --dy: 40px; } +.splash-dust .d16 { left: 78%; top: 38%; animation: dustFly 3.5s ease-out 0.8s infinite; --dx: 65px; --dy:-65px; } @keyframes dustFly { - 0% { opacity: 0; transform: translate(0, 0) scale(0.4); } + 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); } + 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } } .brand-tagline-gold { font-family: "Inter", system-ui, sans-serif; diff --git a/miniapp/index.html b/miniapp/index.html index 5e17f92..3318f2b 100644 --- a/miniapp/index.html +++ b/miniapp/index.html @@ -12,37 +12,42 @@ - - + + - +
- + + +
CRM
- - - - - - - - - + + + + + + + + +