js+css实现六边形蜂窝点击图标涟漪扩散动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现六边形蜂窝点击图标涟漪扩散动画效果代码
代码标签: js css 六边形 蜂窝 点击 图标 涟漪 扩散 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; :root { --color-primary: #ee75d2; --color-secondary: #75d8ee; --color-tertiary: #deee75; --color-quaternary: #9375ee; --color-surface: black; --bg: linear-gradient( to bottom, color-mix(in srgb, var(--color-quaternary), black 70%), var(--color-surface) ); --color-on-surface: var(--color-primary); --hover-filter: brightness(1.2); } @media (any-pointer: fine) { :root { --icon-filter: saturate(3.4) brightness(0.5) invert(1); --ripple-filter: blur(1rem); } } .vision-ui { --color-surface-container: rgba(255, 255, 255, 0.35); --color-on-surface: white; --hover-filter: brightness(1.5); } @media (any-pointer: fine) { .vision-ui { --icon-filter: saturate(0.4); --ripple-filter: filter(0.2rem); } } @property --index { syntax: "<number>"; initial-value: 0; inherits: true; } @property --ripple-factor { syntax: "<number>"; initial-value: 0; inherits: true; } :root { --hexagon-size: 8vmin; --gap: 0.1vmin; } .container { display: flex; position: relative; align-items: center; } .container .column { margin: 0 -0.2vmin; display: flex; flex-direction: column; align-items: center; } .hexagon { --mix-percentage: calc(var(--column) * var(--index) * 3%); width: var(--hexagon-size); aspect-ratio: 1; position: relative; background: var(--color-surface-container, color-mix(in srgb, var(--color-secondary), var(--color-primary) var(--mix-percentage))); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); cursor: pointer; } @media (hover) { .hexagon:hover { filter: var(--hover-filter); } } .hexagon:after { content: var(--icon); display: grid; place-items: center; position: absolute; filter: var(--icon-filter); font-size: 2.5vmin; inset: 0; } @-webkit-keyframes ripple { from { transform: scale(1); opacity: 1; } 50% { transform: scale(max(0.8, calc(var(--ripple-factor) / 100))); opacity: 0.42; } 65% { opacity: 1; } 70% { transform: scale(1.5); filter: var(--ripple-filter); } to { transform: scale(1); opacity: 1; } } @keyframes ripple { from { transform: scale(1); opacity: 1; } 50% { transform: scale(max(0.8, calc(var(--ripple-factor) / 100))); opacity: 0.42; } 65% { opacity: 1; } 70% { transform: scale(1.5); filter: var(--ripple-filter); } to { transform: scale(1); opacity: 1; } } .container.show-ripple { pointer-events: none; } .container.show-ripple .hexagon { cursor: default; --duration: 0.45s; -webkit-animation: ripple var(--duration) ease-in-out; animation: ripple var(--duration) ease-in-out; -webkit-animation-duration: max(var(--duration), calc(var(--duration) * var(--ripple-factor) / 100)); animation-duration: max(var(--duration), calc(var(--duration) * var(--ripple-factor) / 100)); -webkit-animation-delay: calc(var(--ripple-factor) * 8ms); animation-delay: calc(var(--ripple-factor) * 8ms); } .switch { --mix-percentage: calc(var(--column) * var(--index) * 3%); width: var(--hexagon-size); aspect-ratio: 1; position: relative; background: var(--color-surface-container, color-mix(in srgb, var(--color-secondary), var(--color-primary) var(--mix-percentage))); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); cursor: pointer; --index: 6; --column: 2; position: absolute; display: flex; top: 4vmin; right: 4vmin; width: 8vmin; height: 4vmin; cursor: pointer; font-size: 2vmin; } .switch:after { --mix-percentage: calc(var(--column) * var(--index) * 3%); width: var(--hexagon-size); aspect-ratio: 1; position: relative; background: var(--color-surface-container, color-mix(in srgb, var(--color-secondary), var(--color-primary) var(--mix-percentage))); -webkit-backdrop-filter: blur(1rem); backdrop-filter: blur(1rem); -webkit-clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); clip-path: polygon(98.66024% 45%, 99.39693% 46.5798%, 99.84808% 48.26352%, 100% 50%, 99.84808% 51.73648%, 99.39693% 53.4202%, 98.66025% 55%, 78.66025% 89.64102%, 77.66044% 91.06889%, 76.42788% 92.30146%, 75% 93.30127%, 73.4202% 94.03794%, 71.73648% 94.48909%, 70% 94.64102%, 30% 94.64102%, 28.26352% 94.48909%, 26.5798% 94.03794%, 25% 93.30127%, 23.57212% 92.30146%, 22.33956% 91.06889%, 21.33975% 89.64102%, 1.33975% 55%, 0.60307% 53.4202%, 0.15192% 51.73648%, 0% 50%, 0.15192% 48.26352%, 0.60307% 46.5798%, 1.33975% 45%, 21.33975% 10.35898%, 22.33956% 8.93111%, 23.57212% 7.69854%, 25% 6.69873%, 26.5798% 5.96206%, 28.26352% 5.51091%, 30% 5.35898%, 70% 5.35898%, 71.73648% 5.51091%, 73.4202% 5.96206%, 75% 6.69873%, 76.42788% 7.69854%, 77.66044% 8.93111%, 78.66025% 10.35898%); display: grid; place-items: center; --index: 6; --column: 4; content: "👾"; position: absolute; left: 0; top: 0; height: 4vmin; width: 6vmin; transition: transform 0.3s ease; } .switch.checked:after { transform: translateX(2vmin); content: "🕶️"; } body { width: 100vw; height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--color-on-surface); overflow: hidden; } body:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(at center, transparent 80%, black), linear-gradient(to top, rgba(0, 0, 0, 0.3) 70%, transparent), url(//repo.bfw.wiki/bfwrepo/image/65c0a67c73774.png) no-repeat 45% center/cover; opacity: 0; filter: blur(0.5rem); transition: opacity 0.6s ease-in-out, filter 0.6s ease-in-out; } .vision-ui body:before { opacity: 1; filter: blur(0); } * { box-sizing: border-box; } a.labs-follow-me { display: flex; align-items: flex-end; justify-content: center; left: 2rem; right: 2rem; bottom: 0.5vh; top: unset; text-align: center; } a.labs-follow.........完整代码请登录后点击上方下载按钮下载查看
网友评论0