728x90
반응형

애니메이션효과 2

비주얼 스튜디오 코드 34 _ 애니메이션 효과 _ 마을의 하루 예제

html 골격잡아주기 body 안에 section태그로 박스 잡아주기 css에서 편집해주기 1. body에 화면 배경색과 크기를 잡아준다. 2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다. h1 태그로 제목 넣어주기 css 에서 h1 편집 position띄워서 위치를 잡아준다. 구글폰트에서 웹폰트 가져오기 h1에 font-family: .. 웹폰트를 가져온다. 폰트 명령어 간소화하기 ▼ font: 폰트크기 / 줄간격 '폰트종류' ; section 안에 article태그를 넣어준다. article에 class이름을 sky이라고 지정 article에 이미지를 넣어준다. css > article 편집해주기 이미지 sky, sun위치 잡아주기 각각 이미지에 positi..

비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기

● cubic-bezier https://cubic-bezier.com/#.17,.67,.83,.67 cubic-bezier.com cubic-bezier.com 베지에 곡선을 이용해서 이벤트 속도를 조절할 수가 있다. 선 화면 중앙에 보내기 애니메이션 주기 ●animation : bar 2s ease-in-out infinite; bar : 애니메이션 이름 2s : 수행시간 ease-in-out : 수행시간 동안 빠르기를 조절해주는 명령어 infinite : 수행할 갯수 ( 무한정) ● @keyframes : 움직이는 값을 줄때 사용한다. 선이 제자리에서 움직인다. 0%에서 bar 높이값이 0, 회전 0 에서 시작 25%에서 진행속도 대신에 베지에 곡선을 이용해서 속도를 조절할 수 있다. ● cubic..

728x90
반응형