2) Teeman Lisää CSS (kaikki tyylit) Blogger → Teema → Mukauta → Lisäasetukset → Lisää CSS ja liitä tämä: css Kopioi koodi .kipu-electric{ position:relative; display:inline-block; isolation:isolate; max-width:100%; cursor:pointer; } .kipu-electric .kipu-logo{ display:block; width:100%; height:auto; } .kipu-electric .zap{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; transition:opacity 120ms ease-out; } .kipu-electric .bolt{ fill:none; stroke-linecap:round; filter:url(#kipu-noise); stroke-dasharray:14 10 6 8 18 12; animation:none; } .kipu-electric .bolt-red{ stroke:#e11d48; stroke-width:14; opacity:.22; } .kipu-electric .bolt-blue{ stroke:#2563eb; stroke-width:14; opacity:.22; mix-blend-mode:screen; } .kipu-electric .bolt-core{ stroke:url(#kipu-rbg); stroke-width:4.5; opacity:.95; filter:drop-shadow(0 0 6px #fff); } .kipu-electric.active .zap{ opacity:1; } .kipu-electric.active .bolt{ animation: dash 300ms linear infinite, jitter 60ms steps(2,end) infinite, flicker 90ms linear infinite; } /* Hover vain hiirelle – mobiili hoidetaan JS:llä */ @media (hover:hover) and (pointer:fine){ .kipu-electric:hover .zap{ opacity:1; } .kipu-electric:hover .bolt{ animation: dash 300ms linear infinite, jitter 60ms steps(2,end) infinite, flicker 90ms linear infinite; } } @keyframes dash{ 0%{stroke-dashoffset:0} 100%{stroke-dashoffset:-120} } @keyframes jitter{ 0%{transform:translateY(0)} 50%{transform:translateY(-0.6px)} 100%{transform:translateY(0.6px)} } @keyframes flicker{ 0%,19%,22%,62%,64%,70%,100%{opacity:1} 20%,63%{opacity:.75} 65%{opacity:.55} } @media (prefers-reduced-motion: reduce){ .kipu-electric .bolt{ animation:none!important; } .kipu-electric .zap{ transition:none; } }