Front-end/CSS
CSS3 속성 몇 가지, Animation
pathas
2019. 12. 21. 01:43
191220 수업 내용 정리
CSS3 속성 몇 가지
border-radius : 테두리의 둥글기를 지정, 숫자가 커질수록 원에 가까워짐
box-shadow : 오른쪽 그림자 크기, 아래쪽 그림자 크기, 번지는 정도, 색상
ex) box-shadow:10px 10px 30px #666666;
오른쪽 10px, 아래쪽 10px 크기, 30px 넓이로 퍼짐, #666666 색을 가짐
background-size : width height;
text-shadow : 텍스트 그림자 지정, 들어가는 값은 box-shadow와 동일
색상을 rgba(r, g, b, a)로 지정하면 4번째 값에 opacity(투명도 : 0 ~ 1)를 부여할 수 있음
animation
animation-duration : 작동시간(초)
animation-name : 애니메이션 이름
예약어 @keyframes : 애니메이션 이름 {기능} : 애니메이션 생성, 함수와 유사
동작 포인트 지정 : from{} to{}
ex) @-webkit-keyframes slideIn {
from{ margin-left:0%; width:100%; }
to{ margin-left:100%; width:100%;}
}
※ 애니메이션이 적용되지 않는 다면 브라우저별 접두어를 활용
애니메이션 사용은 상당히 까다롭기 때문에 브라우저별로 연습해 볼 필요가 있습니다.