본문 바로가기

광고

Design

Tutorial

웹 표준 사이트 만들기
반응형 웹 사이트 만들기

Reference

CSS

NEWS

SITE

Coding


광고

Code View/Animation

[Animation] 2개의 박스를 이용한 꽃 무늬 모션 만들기




처음에 보면 신기하고 신기했습니다.
소스를 한참을 보고 있으면 크게 어려운 소스는 아닙니다.
우선 두개의 박스를 

<div id="sweet">
<div class="intro">
<div class="outro">
<div class="intro">
<div class="outro">
<div class="intro">
                                      
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>    
                      </div>      
                    </div>        

이런 식으로 구성한 뒤

-webkit-animation: rounddd 8s linear infinite;
  animation: rounddd 8s linear infinite;
transition: border-radius 0.3s linear;

애니메이션을 설정하면 됩니다.^^
창의성이 돋보이네요~


See the Pen juEkL by Ian (@ianhislopdesign) on CodePen.