div+css实现鼠标悬浮频谱动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现鼠标悬浮频谱动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,700&display=swap"); * { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-image: radial-gradient(circle, #333, #000 800px); min-height: 100vh; display: grid; place-items: center; } .noise { position: relative; width: 287px; height: 36px; border: none; background: none; font-family: "Josefin Sans", sans-serif; font-size: 24px; color: #fff; cursor: pointer; } .noise::after { content: "Hover for Noise"; opacity: var(--op, 1); transition: opacity 0.4s; } .noise > i { position: absolute; left: var(--left, 0); top: 50%; width: 3px; height: 72px; transform: translateY(-50%) scaleY(var(--sy, 0)); z-index: -1; transition: transform var(--duration) ease-out; } .noise > i::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#fff, hsl(var(--hue, 0), 75%, 75%)); border-radius: 50%; -webkit-animation: noise var(--duration) infinite ease-in-out alternate; animation: noise var(--duration) infinite ease-in-out alternate; -webkit-animation-play-state: var(--aps, paused); animation-play-state: var(--aps, paused); } @-webkit-keyframes noise { 0% { transform: scaleY(calc(1 - (var(--size, 0)))); } 100% { transform: scaleY(calc(1 + (var(--size, 0)))); } } @keyframes noise { 0% { transform: scaleY(calc(1 - (var(--size, 0)))); } 100% { transform: scaleY(calc(1 + (var(--size, 0)))); } } .noise > i:nth-child(1) { --left: 0px; --duration: 322ms; --size: 0.359; --hue: 0; } .noise > i:nth-child(2) { --left: 4px; --duration: 256ms; --size: 0.102; --hue: 5; } .noise > i:nth-child(3) { --left: 8px; --duration: 382ms; --size: 0.888; --hue: 10; } .noise > i:nth-child(4) { --left: 12px; --duration: 251ms; --size: 0.461; --hue: 15; } .noise > i:nth-child(5) { --left: 16px; --duration: 349ms; --size: 0.002; --hue: 20; } .noise > i:nth-child(6) { --left: 20px; --duration: 392ms; --size: 0.572; --hue: 25; } .noise > i:nth-child(7) { --left: 24px; --duration: 338ms; --size: 0.588; --hue: 30; } .noise > i:nth-child(8) { --left: 28px; --duration: 400ms; --size: 0.649; --hue: 35; } .noise > i:nth-child(9) { --left: 32px; --duration: 283ms; --size: 0.461; --hue: 40; } .noise > i:nth-child(10) { --left: 36px; --duration: 248ms; --size: 0.508; --hue: 45; } .noise > i:nth-child(11) { --left: 40px; --duration: 292ms; --size: 0.919; --hue: 50; } .noise > i:nth-child(12) { --left: 44px; --duration: 216ms; --size: 0.44; --hue: 55; } .noise > i:nth-child(13) { --left: 48px; --duration: 271ms; --size: 0.335; --hue: 60; } .noise > i:nth-child(14) { --left: 52px; --duration: 291ms; --size: 0.558; --hue: 65; } .noise > i:nth-child(15) { --left: 56px; --duration: 314ms; --size: 0.718; --hue: 70; } .noise > i:nth-child(16) { --left: 60px; --duration: 301ms; --size: 0.453; --hue: 75; } .noise > i:nth-child(17) { --left: 64px; --duration: 206ms; --size: 0.455; --hue: 80; } .noise > i:nth-child(18) { --left: 68px; --duration: 375ms; --size: 0.128; --hue: 85; } .noise > i:nth-child(19) { --left: 72px; --duration: 282ms; --size: 0.07; --hue: 90; } .noise > i:nth-child(20) { --left: 76px; --duration: 303ms; --size: 0.072; --hue: 95; } .noise > i:nth-child(21) { --left: 80px; --duration: 269ms; --size: 0.078; --hue: 100; } .noise > i:nth-child(22) { --left: 84px; --duration: 201ms; --size: 0.439; --hue: 105; } .noise > i:nth-child(23) { --left: 88px; --duration: 390ms; --size: 0.614; --hue: 110; } .noise > i:nth-child(24) { --left: 92px; --duration: 393ms; --size: 0.493; --hue: 115; } .noise > i:nth-child(25) { --left: 96px; --duration: 233ms; --size: 0.594; --hue: 120; } .noise > i:nth-child(26) { --left: 100px; --duration: 323ms; --size: 0.452; --hue: 125; } .noise > i:nth-child(27) { --left: 104px; --duration: 214ms; --size: 0.147; --hue: 130; } .noise > i:nth-child(28) { --left: 108px; --duration: 206ms; --size: 0.452; --hue: 135; } .noise > i:nth-child(29) { --left: 112px; --duration: 392ms; --size: 0.953; --hue: 140; } .noise > i:nth-child(30) { --left: 116px; --duration: 235ms; --size: 0.364; --hue: 145; } .noise > i:nth-child(31) { --left: 120px; --duration: 258ms; --size: 0.725; --hue: 150; } .noise > i:nth-child(32) { --left: 124px; --duration: 364ms; --size: 0.796; --hue: 155; } .noise > i:nth-child(33) { --left: 128px; --duration: 266ms; --size: 0.374; --hue: 160; } .noise > i:nth-child(34) { --left: 132px; --duration: 391ms; --size: 0.214; --hue: 165; } .noise > i:nth-child(35) { --left: 136px; --duration: 375ms; --size: 0.275; --hue: 170; } .noise > i:nth-child(36) { --left.........完整代码请登录后点击上方下载按钮下载查看
网友评论0