Interactive2 [CSS100DAYS :: DAY4] 인터렉티브 CSS 다루기 - transfrom을 이용하여 동심원 애니메이션 만들기 DAY2도 했는데 얘가 더 쉬워서 먼저 올린다. CSS 100 챌린지를 하면서 느낀 건 transfrom을 잘만 사용하면 어려워보이는 인터렉티브 동작도 생각보다 쉽게 구현할 수 있고, 그 애니메이션이란 게 대부분 반복적이다 보니 처음에만 잘 방향을 잡아두면 어렵지 않게 만들 수 있다. 가장 먼저 html 코드를 작성해준다. 지난번과 크게 다르지 않다. 이제 CSS로 기본적인 모양을 만들어주자. 배경색과 쉐이드가 있는 각각 크기가 다른 원 세 개를 만들어 준다. 여기서 infinite는 애니메이션을 무한으로 반복시켜 주는 것이고 alternate는 애니메이션을 순방향으로 진행시킨 다음 역방향으로 다시 진행시켜 주는 것을 말한다. 이렇게 하면 동심원이 펼쳐졌다가 다시 사그라드는 동작을 영원히 반복하게 된다... 2022. 1. 21. [HTML5/Canvas] Canvas 공부 1일차 : x축 기본 애니메이션까지 Canvas Day1 Canvas란 Canvas는 HTML5에서 새로 추가된 태그 중 하나로, 페이지에 그래픽 요소를 추가할 때 주로 사용된다. 기본적으로 width, height 속성을 가지고 있는데 이는 레이아웃이 랜더링되어 있기 때문에 CSS로 임의로 크기를 지정할 경우 화면이 왜곡되어 보일 수 있어 비율을 맞춰주어야 한다. 아래 두개의 canvas는 겉으로 보기에는 같은 크기이나 실제 화면에 이미지를 그렸을 때 차이가 난다. Canvas는 일반적인 이미지 속성과 같이 margin, border 등을 줄 수 있지만 실제 캔버스에 그리는 그림에는 영향을 미치지 않는다. 기본적인 사각형 그리기 var canvas = document.getElementById("board_canvas"); var ctx.. 2020. 12. 6. 이전 1 다음
