js+css实现六边形蜂窝点击图标涟漪扩散动画效果代码-html代码-BFW代码库

js+css实现六边形蜂窝点击图标涟漪扩散动画效果代码

代码语言：html

所属分类：动画

代码描述：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%, 7.........完整代码请登录后点击上方下载按钮下载查看