neo/roi24
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Логотип: пиксельная сетка с анимацией

Browse Source
This commit is contained in:
neo committed 2026-06-25 23:28:47 +05:00
1 parent 02f4ac743c
commit 66e31369a4
1 file changed
+34 -9
Download Patch File Download Diff File Expand all files Collapse all files
index_ibm.html
+34 -9
View File
@@ -155,15 +155,35 @@ section { padding: 120px 0; position: relative; z-index: 1; }
font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em;
display: flex; align-items: center; gap: 10px;
}
.logo-mark {
width: 32px; height: 32px; border-radius: 6px;
background: var(--accent); display: flex; align-items: center;
justify-content: center; font-family: 'IBM Plex Mono', 'SF Mono', monospace;
font-size: 0.8125rem; font-weight: 700; color: #fff;
transition: transform 0.3s var(--ease-out);
.logo-pixel {
display: grid; grid-template-columns: repeat(4, 6px); gap: 2px;
flex-shrink: 0;
}
[data-theme="dark"] .logo-mark { color: #000; }
.logo:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
.logo-pixel .px {
width: 6px; height: 6px; border-radius: 2px;
background: var(--accent);
animation: pxLogo 2.5s ease-in-out infinite;
}
.logo-pixel .px:nth-child(odd) { animation-name: pxLogoBlink; }
.logo-pixel .px:nth-child(1){animation-delay:0s}
.logo-pixel .px:nth-child(2){animation-delay:0.15s}
.logo-pixel .px:nth-child(3){animation-delay:0.3s}
.logo-pixel .px:nth-child(4){animation-delay:0.45s}
.logo-pixel .px:nth-child(5){animation-delay:0.6s}
.logo-pixel .px:nth-child(6){animation-delay:0.75s}
.logo-pixel .px:nth-child(7){animation-delay:0.9s}
.logo-pixel .px:nth-child(8){animation-delay:1.05s}
.logo-pixel .px:nth-child(9){animation-delay:1.2s}
.logo-pixel .px:nth-child(10){animation-delay:0.1s}
.logo-pixel .px:nth-child(11){animation-delay:0.25s}
.logo-pixel .px:nth-child(12){animation-delay:0.4s}
.logo-pixel .px:nth-child(13){animation-delay:0.55s}
.logo-pixel .px:nth-child(14){animation-delay:0.7s}
.logo-pixel .px:nth-child(15){animation-delay:0.85s}
.logo-pixel .px:nth-child(16){animation-delay:1s}
@keyframes pxLogo{0%,100%{opacity:0.3;transform:scale(0.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes pxLogoBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.9)}}
.logo:hover .logo-pixel { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.nav { display: flex; align-items: center; gap: 40px; }
.nav a {
font-size: 0.8125rem; color: var(--text-sec);
@@ -794,7 +814,12 @@ h1 {
<header class="header" id="header">
<div class="wrap">
<div class="logo">
<div class="logo-mark">R</div>
<div class="logo-pixel">
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
<span class="px"></span><span class="px"></span><span class="px"></span><span class="px"></span>
</div>
ROI24
</div>
<nav class="nav">