it 수업 3주차 (42) Animation_Transition

(1)

 

 

 

 

<실행화면>

 

첫 화면에서는 글을 쓸 수 있는 부분이 보이지 않지만 클릭하면 0.5s의 속도로 밑줄이 생기는 것을 볼 수 있다. 

또, 글쓰는 부분이 아닌 곳을 클릭하면 글쓰는 부분이 서서이 짧아지며 줄어드는 것을 볼 수 있다.

 

또한 주황색 박스에 커서를 갖다 대면 각자의 속도대로 길어지는 것을 볼 수 있다.

 

 

 

 

 

(2)

 

 

 

 

<실행화면>

구글에서 이미지를 찾아 이미지의 주소를 url에 첨부하였다.

여기서 이미지가 들어있는 박스에 커서를 가져다 되면 이미지들이 아래로 움직이는 것을 볼 수 있다.

 

 

 

 

 

 

 

사진 출처: 

https://kr.freepik.com/premium-vector/cute-dog-illustration_42642304.htm

https://kr.freepik.com/premium-vector/cute-dog-cartoon-illustration_29092365.htm

https://kor.pngtree.com/freepng/cute-dog-illustration_9009551.html