剪辑路径框架

下载代码

html

css

分享到微信朋友圈

html

css

main {
  height: 100vh;
  overflow: hidden;
  background: #021425;
  clip-path: polygon(
    0% 45%,
    30% 19%,
    55% 35%,
    85% 5%,
    100% 15%,
    100% 70%,
    85% 60%,
    55% 90%,
    30% 74%,
    0% 100%,
    0% 0%,
    85% -15%,
    55% 15%,
    30% -1%,
    0% 25%,
    0% 120%,
    100% 120%,
    100% 90%,
    85% 80%,
    55% 110%,
    30% 94%,
    0% 120%
  );
}
body {
  background: #000;
  overflow: hidden;
  transform: rotate(180deg);
}
div {
  border: 1vmin solid hsl(var(--h, 343), 100%, 55%);
  border-radius: 50%;
  width: calc(var(--size) * 1vmin);
  height: calc(var(--size) * 1vmin);
  --size: 20;
  font-size: calc(var(--size) * 0.35vmin);
  position: absolute;
  translate: -50% 0%;
  mix-blend-mode: difference;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
  padding-left: calc(var(--size) * 0.2vmin);
  color: rgba(0, 0, 0, 0);
}
div:nth-child(2n + 2) {
  background: hsl(var(--h, 343), 100%, 55%);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg