纯css实现二元性视觉效果-html代码-BFW代码库

纯css实现二元性视觉效果

代码语言：html

代码描述：纯css实现二元性视觉效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body,
.c1,
.c2 {
  display: grid;
  place-items: center;
  background-color: #000;
}
body {
  min-height: 100vh;
  overflow: hidden;
}
.c1,
.c2 {
  min-width: 16vmin;
  min-height: 16vmin;
  border-radius: 50%;
  padding: 6vmin;
  background-size: 4vmin 4vmin;
  background-position: calc(50% + 0vmin) calc(50% + 0vmin);
}
.c1 {
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), color-stop(0, transparent));
  background-image: linear-gradient(to left, #fff 0 0.4vmin, transparent 0);
  -webkit-animation: c1 0.3s infinite linear;
          animation: c1 0.3s infinite linear;
}
.c2 {
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0, transparent));
  background-image: linear-grad.........完整代码请登录后点击上方下载按钮下载查看