CSS DNA

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --background-color: #161616;
  --strand-color: #e6e6e6;
  --strand-color-alt: #00a39b;
  --strand-width: 2.5rem;
  --strand-height: .5rem;
  --strand-line: .125rem;
  --strand-ball: calc(var(--strand-height) * .75);
  --animation-duration: .5s;
  --animation-delay: calc(var(--animation-duration) * -.375);
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
  font-size: 16px;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  background-color: var(--background-color);
}

.dna {
  width: var(--strand-width);
}

.strand {
  position: relative;
  width: var(--strand-width);
  height: var(--strand-height);
}
.strand:nth-child(3n) {
  --strand-color: var(--strand-color-alt);
}
.strand::before, .strand::after {
  content: '';
  position: absolute;
  background: var(--strand-color);
  -webkit-animation-duration: calc(var(--animation-duration));
          animation-duration: calc(var(--animation-duration));
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-animation-delay: calc(var(--s) * var(--animation-delay));
          animation-delay: calc(var(--s) * var(--animation-delay));
}
.strand::before {
  left: calc(var(--strand-ball) / 2);
  top: calc((var(--strand-height) - var(--strand-line)) / 2);
  width: calc(var(--strand-width) - var(--strand-ball));
  height: var(--strand-line);
  -webkit-animation-name: line;
          animation-name: line;
  will-change: transform;
}
.strand::after {
  top: calc((var(--strand-height) - var(--strand-ball)) / 2);
  width: var(--strand-ball);
  height: var(--strand-ball);
  border-radius: 50%;
  -webkit-box-shadow: calc(var(--strand-width) - var(--strand-ball)) 0 0 var(--strand-color);
          box-shadow: calc(var(--strand-width) - var(--strand-ball)) 0 0 var(--strand-color);
  -webkit-animation-name: ball;
          animation-name: ball;
  will-change: transform, box-shadow;
}

@-webkit-keyframes line {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

@keyframes line {
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes ball {
  to {
    -webkit-transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
            transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
    -webkit-box-shadow: 0 0 0 var(--strand-color);
            box-shadow: 0 0 0 var(--strand-color);
  }
}
@keyframes ball {
  to {
    -webkit-transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
            transform: translateX(calc((var(--strand-width) - var(--strand-ball)) / 2));
    -webkit-box-shadow: 0 0 0 var(--strand-color);
            box-shadow: 0 0 0 var(--strand-color);
  }
}

JavaScript

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