平方微调器{css}

下载代码

html

css

分享到微信朋友圈

html

css

.a {
  background: salmon;
  width: 100vmin;
  height: 100vmin;
  transform: rotate(45deg) scale(0.8, 0.8);
  -webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 40% 40%, 40% 60%, 60% 60%, 60% 40%, 40% 40%);
          clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 40% 40%, 40% 60%, 60% 60%, 60% 40%, 40% 40%);
}
.a:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(-45deg, transparent 0 1vmin, #057f8d 0 4vmin, rgba(5, 127, 141, 0.2) 0 18vmin);
  -webkit-animation: 5s f infinite;
          animation: 5s f infinite;
}
@-webkit-keyframes f {
  0%,
  100% {
    -webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 30% 30%, 30% 70%, 70% 70%, 70% 30%, 30% 30%);
            clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 30% 30%, 30% 70%, 70% 70%, 70% 30%, 30% 30%);
  }
  20% {
    -webkit-clip-path: polygon(80% 20%, 80% 80%, 20% 80%, 20% 20%, 80% 20%, 70% 30%, 30% 30%, 30% 70%, 70% 70%, 70% 30%);
            clip-path: polygon(80% 20%, 80% 80%, 20% 80%, 20% 20%, 80% 20%, 70% 30%, 30% 30%, 30% 70%, 70% 70%, 70% 30%);
  }
  50% {
    -webkit-clip-path: polygon(80% 80%, 20% 80%, 20% 20%, 80% 20%, 80% 80%, 70% 70%, 70% 30%, 30% 30%, 30% 70%, 70% 70%);
            clip-path: polygon(80% 80%, 20% 80%, 20% 20%, 80% 20%, 80% 80%, 70% 70%, 70% 30%, 30% 30%, 30% 70%, 70% 70%);
  }
  80% {
    -webkit-clip-path: polygon(20% 80%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 30% 70%, 70% 70%, 70% 30%, 30% 30%, 30% 70%);
            clip-path: polygon(20% 80%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 30% 70%, 70% 70%, 70% 30%, 30% 30%, 30% 70%);
  }
}
@keyframes f {
  0%,
  100% {
    -webkit-clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 30% 30%, 30% 70%, 70% 70%, 70% 30%, 30% 30%);
            clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 30% 30%, 30% 70%, 70% 70%, 70% 30%, 30% 30%);
  }
  20% {
    -webkit-clip-path: polygon(80% 20%, 80% 80%, 20% 80%, 20% 20%, 80% 20%, 70% 30%, 30% 30%, 30% 70%, 70% 70%, 70% 30%);
            clip-path: polygon(80% 20%, 80% 80%, 20% 80%, 20% 20%, 80% 20%, 70% 30%, 30% 30%, 30% 70%, 70% 70%, 70% 30%);
  }
  50% {
    -webkit-clip-path: polygon(80% 80%, 20% 80%, 20% 20%, 80% 20%, 80% 80%, 70% 70%, 70% 30%, 30% 30%, 30% 70%, 70% 70%);
            clip-path: polygon(80% 80%, 20% 80%, 20% 20%, 80% 20%, 80% 80%, 70% 70%, 70% 30%, 30% 30%, 30% 70%, 70% 70%);
  }
  80% {
    -webkit-clip-path: polygon(20% 80%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 30% 70%, 70% 70%, 70% 30%, 30% 30%, 30% 70%);
            clip-path: polygon(20% 80%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 30% 70%, 70% 70%, 70% 30%, 30% 30%, 30% 70%);
  }
}
body {
  background: #057f8d;
  display: grid;
  place-content: center;
  height: 100vh;
  filter: drop-shadow(5vmin 5vmin 0 #0003);
  overflow: hidden;
}

JavaScript

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