이 포스팅은 PC로 작성되었습니다.
모바일로 보시는 분들에게는 가끔
줄 바꿈이 어색하게 보일 수 있습니다.
지난 포스트
CSS 트랜지션
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 gogogameboy.tistory.com/108 오늘 공부할 내용은 트랜지션 transition입니다. 생
gogogameboy.tistory.com
지난 포스트에 이어서 이번에도 트랜지션의 다른 효과를 공부해보도록 하겠습니다.
transition-timing-function
위의 소스 코드는 PC에서 드래그 후,
ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다.
ctrl+c(복사)는 불가능합니다.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
강의 영상에 나온대로 위의 사이트의 도움을 받아서 코드를 작성했습니다.
웹페이지의 로딩이 끝나면 배경색 바뀌게 하기
자바스크립트의 언어가 사용돼서 아직 정확히 이해를 하지 않아도 됩니다.
body{ background-color: black; transition:all 1s; }
이 코드로 백그라운드 컬러는 블랙으로 하고 transition의 값은 1초를 줍니다.
그리고 바디 태그에 <body onload="document.querySelector('body').style.backgroundColor='white';"> 라고 입력을 해주면 웹페이지로 들어왔을 때 백그라운드 컬러가 1초에 걸쳐서 서서히 화이트 색상으로 변하게 됩니다.
다음 포스트
CSS, link와 import
이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 이 포스팅은
gogogameboy.tistory.com
이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.
'front-end > css' 카테고리의 다른 글
| CSS 코드 경량화 minify (0) | 2021.01.15 |
|---|---|
| CSS, link와 import (0) | 2021.01.13 |
| CSS 트랜지션 (0) | 2021.01.12 |
| CSS 트랜스폼 중심축 바꾸기 (0) | 2021.01.12 |
| CSS 트랜스폼 (0) | 2021.01.11 |
댓글