it 수업 3주차 (42) Animation

IT수업/HTML+CSS

워제하 2024. 1. 11. 22:53

(1)

<실행화면>

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

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

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

(2)

<실행화면>

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

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

사진 출처: