119 lines
7.3 KiB
HTML
119 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>calls24 — Animated Logo</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;padding:40px 20px}
|
|
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px}
|
|
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
|
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:0 auto}
|
|
@media(max-width:600px){.grid{grid-template-columns:1fr}}
|
|
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
|
|
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
|
|
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
|
|
.card .desc{font-size:12px;color:#666;margin-bottom:24px;line-height:1.5}
|
|
.preview{background:#050505;border-radius:12px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:120px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>calls24 — Animated Logos</h1>
|
|
<p class="sub">SVG CSS animations</p>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- Entrance -->
|
|
<div class="card" style="grid-column:1/-1">
|
|
<div class="label">Entrance</div>
|
|
<div class="name">Волна растёт, текст выезжает, линия рисуется</div>
|
|
<div class="desc">Однократная анимация появления. Идеальна для hero, загрузочных экранов.</div>
|
|
<div class="preview">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
|
|
<defs>
|
|
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"><animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/></stop>
|
|
<stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
<style>
|
|
.b{transform-origin:bottom center;animation:grow 1s ease-out forwards;opacity:0}
|
|
.b1{animation-delay:.1s}.b2{animation-delay:.2s}.b3{animation-delay:.3s}.b4{animation-delay:.4s}.b5{animation-delay:.5s}
|
|
@keyframes grow{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
|
|
.b3{animation:grow 1s ease-out forwards, pulse 3s ease-in-out infinite 1.2s}
|
|
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
|
|
.d{opacity:0;animation:dp .5s ease-out forwards}
|
|
.d1{animation-delay:.5s}.d2{animation-delay:.6s}.d3{animation-delay:.7s}.d4{animation-delay:.8s}.d5{animation-delay:.9s}
|
|
@keyframes dp{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}100%{opacity:var(--o);transform:scale(1)}}
|
|
.t{opacity:0;transform:translateX(-10px);animation:ti .7s ease-out forwards;animation-delay:.6s}
|
|
@keyframes ti{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
|
|
.l{stroke-dasharray:30;stroke-dashoffset:30;animation:ld .5s ease-out forwards;animation-delay:1s}
|
|
@keyframes ld{0%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
|
|
</style>
|
|
</defs>
|
|
<g transform="translate(2,2)">
|
|
<rect class="b b1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
|
<rect class="b b2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
|
<rect class="b b3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g1)"/>
|
|
<rect class="b b4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
|
<rect class="b b5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
|
<circle class="d d1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
|
<circle class="d d2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
|
<circle class="d d3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
|
|
<circle class="d d4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
|
<circle class="d d5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
|
</g>
|
|
<g class="t">
|
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
|
<line class="l" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loop -->
|
|
<div class="card" style="grid-column:1/-1">
|
|
<div class="label">Loop</div>
|
|
<div class="name">Непрерывная волна + пульсация точек</div>
|
|
<div class="desc">Бесконечная анимация. Идеальна для header, лобби, загрузки.</div>
|
|
<div class="preview">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
|
|
<defs>
|
|
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
|
|
</linearGradient>
|
|
<style>
|
|
.w{animation:wave 2.4s ease-in-out infinite}
|
|
.w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
|
|
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
|
|
.p{animation:dp 2.4s ease-in-out infinite}
|
|
.p1{animation-delay:0s}.p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}.p5{animation-delay:.4s}
|
|
@keyframes dp{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o)*.5);transform:scale(.8)}}
|
|
.ll{stroke-dasharray:30;animation:lp 3s ease-in-out infinite}
|
|
@keyframes lp{0%,100%{opacity:.8}50%{opacity:.3}}
|
|
</style>
|
|
</defs>
|
|
<g transform="translate(2,2)">
|
|
<rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
|
<rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
|
<rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g2)"/>
|
|
<rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
|
|
<rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
|
|
<circle class="p p1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
|
<circle class="p p2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
|
<circle class="p p3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
|
|
<circle class="p p4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
|
|
<circle class="p p5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
|
|
</g>
|
|
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
|
|
<line class="ll" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|