정보실

웹학교

정보실

css Chasing

본문

https://codepen.io/yuanchuan/pen/pBrMNQ 


HTML : 


<css-doodle>

  :doodle {

    @grid: 45x1 / 40vmin;

    position: relative;

    z-index: 1; 

  }

  :container {

    transform: translate(50%, 33vmin)

  }

  :after, :before {

    content: '';

    @place-cell: center;

    @size: 100%;

    background: radial-gradient(

      @p(#FFFDE1, #FB3569) @r(70%),

      transparent 0

    ) 

    @pn(30% 50%, 70% 50%, 50% 60%) / 

    @r(.1vmin, 5vmin) @lr() 

    no-repeat;

  }

  

  @place-cell: centerr;

  @size: 100%;

  

will-change: transform;

  animation: r 4s linear infinite;

  animation-delay: calc(-4s / @size() * @i());


  --translate: translateY(calc(-66vmin / @size() * @i()));

  @keyframes r {

    from { transform: var(--translate) rotate(0) }

    to { transform: var(--translate) rotateZ(-1turn) }

  }

</css-doodle>


<css-doodle> 

:doodle {

@grid: 1x3 / 100vmax;

    position: absolute;

    top: 0; left: 0;

    z-index: 0;

}


@size: 100% 150%;

position: absolute;

  

background: @m(100, (

linear-gradient(transparent, @p(

      #FFFDE1@repeat(2, @p([0-9a-f])), 

      #FB3569@repeat(2, @p([0-9a-f])) 

    ))

@r(0%, 100%) @r(0%, 100%) /

@r(1px) @r(23vmin)

no-repeat

));


will-change: transform;

animation: f 20s linear calc(-20s / @size() * @i()) infinite;

@keyframes f {

from { transform: translateY(-100%) }

to { transform: translateY(100%) }

}

</css-doodle>


CSS : 


html, body { 

  height: 100%; 

  margin: 0; 

  background: #261c33; 

  overflow: hidden; 

  display: flex; 

  align-items: center; 

  justify-content: center 

}



https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 19회 ]  작성일20-01-09 22:58

웹학교