간단한 설명: CS3의 점차적인 변화와 2D 변환
6486 단어 CSS3
1. CS3 그라데이션
CSS3 Gradient는
(linear)
와 (radial)
로 나뉜다.렌더링 엔진에 따라 점차적인 문법이 다르다1.1 선형 그래디언트
background: linear-gradient(direction, color-stop1, color-stop2, ...);
참고:
to bottom
, 즉 위에서 아래로 점차적인 변화;각도
영자
역할
0deg
to top
아래에서 위로
90deg
to right
왼쪽에서 오른쪽으로
180deg
to bottom
위에서 아래로
270deg
to left
오른쪽에서 왼쪽으로
to top left
아래쪽부터 왼쪽 위쪽까지 있어요.
totopright
왼쪽 아래에서 오른쪽 상단까지
1.2 레이디얼 그라데이션
background: radial-gradient(center, shape, size, start-color, ..., last-color);
참고:
1.3 반복 선형 그래디언트
background: repeating-linear-gradient(red, red 10%, balck 20%);
주의: 10%의 위치는 레드, 20%의 위치는 블랙, 그리고 이 20%에 따라 아래로 반복
1.4 반복 레이디얼 그라데이션
background: repeating-radial-gradient(red, red 10%, black 20%);
2. CSS3의 2D 변환
2.1 transform
rotate()
: 회전 함수(수치 도수)skew()
: 경사 함수(수치 도수(비뚤어짐)scale()
: 축소 함수(값의 양수, 음수와 소수)translate()
: 변위 함수2.2 rotate () 방법
deg
2.4 scale () 방법
2.5 translate () 방법
3. CSS3 변환
① CS3에서는 Flash 애니메이션이나 JavaScript를 사용하지 않고 요소가 한 스타일에서 다른 스타일로 바뀔 때 효과를 추가할 수 있습니다.
3.1 transition
transition-property
운동할 스타일(all||[attr]||none)transition-duration
운동시간transition-delay
지연 시간transition-timing-function
운동형식ease
: (점점 느려짐) 기본값linear
: (균일속도)ease-in
: (가속)ease-out
: (감속)ease-in-out
: (가속 후 감속)3.2 pointer-events
pointer-events 포인터 이벤트로 직역
pointer-events:auto/none
none으로 설정되면 다음과 같은 관련 특성이 있습니다.
backface-visibility 속성 정의 요소가 화면에 보이지 않을 때 볼 수 있는지 여부
backface-visibility: visible|hidden;
// visible
// hidden
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Vue 엔지니어가 만든다】 절대 실패하지 않는 CSS 네비게이션 메뉴 정리 13선이 기사에 기재된 디자인 코드는 모두 자유롭게 사용해 주셔서 괜찮습니다 (필자가 작성했기 때문에) 프로젝트에 넣어보다 충실한 디자인으로 해 주면 ○ 움직임은 아래 이미지처럼 느껴집니다 1. 헤더로 사용하기 쉬운 간단...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.