LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  :doodle { 
    @grid: 1x10 / 61.8vmin; 
  }

  @place-cell: center; 
  @size: calc(@index() * 10%);
  
  border-radius: 50%;
  border-style: dashed;
  border-width: calc(@index() * 1vmin); 
  border-color: hsla(
    calc(20 * @index()), 70%, 68%, 
    calc(3 / @index() * .8)
  );
  
  --d: @rand(20s, 40s); 
  --rf: @rand(360deg);
  --rt: calc(var(--rf) + @pick(1turn, -1turn));

  animation: spin var(--d) linear infinite;
  @keyframes spin {
    from { transform: rotate(var(--rf)) }
    to   { transform: rotate(var(--rt)) }
  }
CSS
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0a0c27;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

Description

css-doodle DEMO http://yuanchuan.name/css-doodle
Term
Wed, 12/06/2017 - 19:44

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv