CSS 애니메이션, 2D, 3D 모듈
일과성
요소 에 transition 속성 을 설정 하여 과도 효 과 를 설정 합 니 다.과도 실제 정 의 는 요소 가 한 상태 에서 다른 상태 로 바 뀌 는 과정 이다. 예 를 들 어 너비 가 100 px 에서 300 px 로 바 뀌 고 배경 색 이 red 에서 orange 로 바 뀌 는 등 이다.
1 div{
2 width:200px;
3 height:200px;
4 background-color:red;
5 transition-property:width,background-color;
6 /* ， */
7 transition-duration:1s;
8 /* ， ， */
9 transition-timing-function:ease;
10 /* ， ease， - - ， ：linear， ；ease-in， - ，ease-out， - ，ease-in-out， - - ， ease */
11 transition-delay:1s;
12 /* */
13 } 요소 의 속성 을 설정 한 후에 특정한 조작 이 지정 한 속성의 변 화 를 촉발 해 야 효 과 를 볼 수 있 습 니 다. 예 를 들 어 hover 또는 JS 이벤트 등 입 니 다.
또한 transition 은 실제 적 으로 하나의 복합 속성 으로 여러 속성 과 도 는 간략하게 쓸 수 있다.
1 div{
2 width:200px;
3 height:200px;
4 transition:width 2s 1s,background-color 2s;
5 /*transition-property transition-duration ， */
6 }
7 div:hover{
8 width:400px
9 }여러 속성 이 과 도 를 설정 하고 사건, 속도 곡선, 지연 시간 을 지속 해 야 할 때 다음 과 같이 간략하게 쓸 수 있 습 니 다.
1 div{
2 /*some code*/
3 transform:all 2s;
4 /* */
5 }애니메이션
애니메이션 은 사실 과도 와 마찬가지 로 요소 에 동적 효 과 를 설정 하 는 데 사 용 됩 니 다. 다른 것 은 과 도 는 인위적인 트리거 가 있어 야 실 행 될 수 있 습 니 다. 여기 서 설명 할 애니메이션 은 인위적인 트리거 가 필요 하지 않 습 니 다.
요소 에 애니메이션 을 설정 하기 전에 우 리 는 먼저 애니메이션 효 과 를 만들어 야 한다. 즉, 시작 이 어떤 상태 이 고 끝 이 어떤 상태 인지.
1 @keyframes sport{/*sport ， */
2 from{
3 width:200px;
4 }
5 to{
6 width:400px;
7 }
8 /* from...to ， ，0% ，100% */
9 }애니메이션 을 만 든 후에 애니메이션 의 지속 시간, 속도 곡선, 반복 횟수 등 요 소 를 설정 할 수 있 습 니 다.
1 div{
2 animation-name:sport;
3 /* ， @keyframs */
4 animation-duration:5s;
5 /* */
6 animation-timing-function:ease;
7 /* , */
8 animation-delay:3s;
9 /* */
10 animation-iteration-count:5;
11 /* ，infinite */
12 animation-direction:alternate;
13 /* ，normal ， ， animation-iteration-count 1*/
14 animation-play-state:paused;
15 /* ， running， */
16 animation-fill-mode:forwards;
17 /* ，forwards， ，backwards， ，none， 。 ， 。 */
18 }3 차원 변환
요소 에 transform 속성 을 설정 하면 요 소 를 2D 로 변환 할 수 있 습 니 다.transform 을 변환 으로 번역 하 는 곳 이 많 습 니 다. 이 단 어 는 영어 에서 의 의 미 를 바 꾸 고 변형 시 키 는 것 입 니 다.나 는 그것 을 변환 으로 번역 하 는 경향 이 있다. CSS 변환 을 통 해 우 리 는 요 소 를 이동, 확대, 회전, 스 트 레 칭 등 을 할 수 있다.
1，translate(x，y)
1 div{
2 transform:translate(50px,100px);
3 }
4 /*div 50px， 100px*/translate 방법 은 두 개의 파 라 메 터 를 받 아 수평 과 수직 정방 향 에서 위로 의 오프셋 을 나타 내 고 마이너스 값 을 받 아 반대 방향 으로 오프셋 을 표시 할 수 있 습 니 다.
2，rotate(deg)
1 div{
2 transform:rotate(30deg);
3 }
4 /* 30 */rotate 방법 은 하나의 파 라 메 터 를 수신 하여 요소 가 회전 하 는 각 도 를 나타 내 고 마이너스 값 을 받 을 수 있 으 며 시계 반대 방향 으로 회전 하 는 것 을 나타 낸다.rotate 방법 은 실제 적 으로 요소 의 좌표 계 를 수정 하여 회전 요소 의 목적 을 달성 하 는 것 이다. 예 를 들 어:
1 div{
2 transform:rotate(45deg) translate(50px,0);
3 /* */
4 }
5 /* 45 ， x 45 50px*/기본 적 인 상황 에서 요 소 는 자신의 중심 점 을 원심 으로 회전 합 니 다. 우 리 는 transform - origin 속성 을 통 해 이 참고 점 을 수정 할 수 있 습 니 다.
1 div{
2 width:200px;
3 height:200px;
4 transform:rotate(30deg);
5 transform-origin:0px 0px;/* */
6 /* 200px 0px 。 。top，botton，left，right，center*/
7 }3，scale(x，y)
1 div{
2 transform:scale(2,3);
3 }
4 /* 2 ， 3 */scale 방법 은 두 개의 파 라 메 터 를 받 아들 이 고 요소 의 너비 가 높 으 면 크기 를 조정 해 야 하 는 비율 을 나타 낸다. 만약 에 매개 변수 가 0 에서 1 사이 에 있 으 면 축 소 를 나타 내 고 0 보다 작 으 면 실제 효 과 는 반전 요소 에 해당 하 며 관심 이 있 는 친 구 는 스스로 테스트 하여 효 과 를 관찰 할 수 있다.
4，skew(x，y)
1 div{
2 transform:skew(30deg,30deg);
3 }
4 /* 30 */skew 방법 은 두 개의 매개 변 수 를 수신 하여 각각 X 축 과 Y 축 이 기울 어 지 는 각 도 를 나타 내 고 두 번 째 매개 변수 가 비어 있 으 면 기본 값 은 0 이 며 매개 변 수 는 마이너스 로 반대 방향 으로 기울 어 지 는 것 을 나타 낸다.
4 차원 변환
요 소 를 3D 효과 로 나타 내 려 면 요소 의 부모 요소 에 transform - style 속성 을 추가 할 수 있 습 니 다.
1 .father{
2 transform-style:preserve-3d;
3 }
4 .son{
5 /*some code*/
6 }transform - style 속성의 기본 값 은 flat, 즉 평면 이라는 뜻 입 니 다.그 값 을 preserve - 3d 로 설정 하면 하위 요 소 를 3D 모드 로 표시 할 수 있 습 니 다.
사실 우 리 는 rotate 방법 에 맞 춰 3D 입체 효 과 를 실현 했다.
우 리 는 2D 공간 에서 좌표 축 은 x 와 y 두 개의 축 만 있 고 3D 공간 에 모두 x, y, z 세 개의 축 이 있다 는 것 을 알 고 있다.우리 가 위 에서 설명 한 rotate 방법 은 사실상 z 축 을 중심 으로 회전 하 는 것 이 고 이것 도 이 방법의 기본 적 인 방식 이다.또한, 사실 우 리 는 rotateX (), rotateY () 를 통 해 요소 의 기본 회전 축 을 바 꿀 수 있다.회전축 방향 을 바 꾸 어 perspective 속성 에 맞 게 사용 하면 효과 가 좋 습 니 다.
1 .father{
2 perspective:500px;
3 /*perspective ， */
4 }
5 .son{
6 width:200px;
7 height:200px;
8 transform:rotateX(45deg);
9 }
10 /* ，perspective ， 。*/다음은 3D 큐 브 의 예제 코드 두 개 입 니 다.
HTML 부분:
1 <div class="D3">
2 <ul>
3 <li>1li>
4 <li>2li>
5 <li>3li>
6 <li>4li>
7 <li>5li>
8 <li>6li>
9 ul>
10 <ul>
11 <li>1li>
12 <li>2li>
13 <li>3li>
14 <li>4li>
15 <li>5li>
16 <li>6li>
17 ul>
18 div>CSS 부분:
1 body{
2 background-color: #ccc;
3 perspective: 800px;
4 }
5 .D3{
6 width:550px;
7 height: 200px;
8 margin:100px auto;
9 }
10 @keyframes sport{
11 from{
12 transform: rotateX(0deg) rotateY(0deg);
13 }
14 to{
15 transform: rotateX(360deg) rotateY(360deg);
16 }
17 }
18 .D3 ul{
19 width: 200px;
20 height: 200px;
21 position: relative;
22 transform-style: preserve-3d;
23 transform: rotateX(0deg) rotateY(0deg);
24 animation: sport 10s linear infinite alternate;
25 display: inline-block;
26 margin-left:50px;
27 }
28 .D3 ul li{
29 list-style: none;
30 width:200px;
31 height: 200px;
32 position: absolute;
33 opacity: 0.3;
34 font-size: 100px;
35 line-height: 200px;
36 text-align: center;
37 }
38 .D3 ul li:nth-child(1){
39 background-color: red;
40 transform:translateZ(100px);
41 }
42 .D3 ul li:nth-child(2){
43 background-color: blue;
44 transform: rotateX(90deg) translateZ(100px);
45 }
46 .D3 ul li:nth-child(3){
47 background-color: yellow;
48 transform: rotateX(180deg) translateZ(100px);
49 }
50 .D3 ul li:nth-child(4){
51 background-color: pink;
52 transform: rotateX(270deg) translateZ(100px);
53 }
54 .D3 ul li:nth-child(5){
55 background-color: purple;
56 transform: rotateY(90deg) translateZ(-100px);
57 }
58 .D3 ul li:nth-child(6){
59 background-color: green;
60 transform: rotateY(90deg) translateZ(100px);
61 }
62 /* ？rotate ！*/5 transform 이 다른 요소 에 미 친 영향
1, 디 스 플레이 우선 순위 증가
표준 문서 흐름 에서 마이너스 margin 값 을 사용 하면 하나의 요 소 를 다른 요소 에 덮어 쓸 수 있 고 정상 적 인 상황 에서 뒤의 요 소 를 앞 에 덮어 쓸 수 있다 는 것 을 알 고 있 습 니 다.하지만 transform 속성 을 설정 한 요 소 는 다른 요 소 를 덮어 씁 니 다.
1 .top{
2 width: 100px;
3 height: 100px;
4 background-color: red;
5 transform: rotate(0deg);
6 }
7 .bottom{
8 width: 100px;
9 height: 100px;
10 background-color: blue;
11 margin-top:-50px;
12 }
13 /* div 50px*/2, fixed 포 지 셔 닝 의 상대 대상 변경
일반적인 상황 에서 position: fixed 를 사 용 했 습 니 다.속성 요 소 는 브 라 우 저 창 에 비해 스크롤 바 의 영향 을 받 지 않 습 니 다.그러나 우리 가 아버지 요소 에 transform 속성 을 설정 한 후에 이 상황 은 바 뀌 었 다.
1 .father{
2 width: 500px;
3 height: 500px;
4 margin-left: 100px;
5 margin-top: 100px;
6 border: 1px solid #000;
7 transform: rotate(0deg);
8 }
9 .son{
10 position: fixed;
11 top: 50px;
12 left:50px;
13 width: 100px;
14 height: 100px;
15 background-color: red;
16 }
17 /*.son ， .father */3, absolute 포 지 셔 닝 요소 의 폭 변경
예전 에 한 요소 가 절대적 인 포 지 셔 닝 을 설정 하고 너비 가 100% 로 설정 되면 이 요소 의 실제 폭 은 첫 번 째 포 지 셔 닝 속성 을 가 진 조상 요소 의 너비 이 고 없 으 면 body 의 너비 이다.현재 첫 번 째 포 지 셔 닝 속성 이 있 는 조상 요소 와 절대적 인 포 지 셔 닝 요소 사이 에 transform 속성 을 설정 한 요소 가 있다 면 절대적 인 포 지 셔 닝 요소 의 너비 계승 체인 은 이 transform 조상 요소 에서 절단 되 고 최종 적 으로 절대적 인 포 지 셔 닝 요소 의 폭 은 transform 요 소 를 계승 할 것 이다.
1 .grand{
2 width: 500px;
3 height: 500px;
4 border: 1px solid #000;
5 position: absolute;
6 }
7 .father{
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 transform:rotate(0deg);
12 }
13 .son{
14 width: 100%;
15 height: 200px;
16 position: absolute;
17 background-color: yellow;
18 }
19 /*.son 500px， 100px*/마지막 으로 transform 은 CSS 3 에서 도입 한 속성 입 니 다. 브 라 우 저 마다 그 실현 에 차이 가 있 을 수 있 습 니 다. 위 에서 소개 한 내용 은 모든 브 라 우 저 에서 똑 같은 표현 을 하 는 것 을 보장 할 수 없습니다. 구체 적 인 상황 은 여러분 이 스스로 테스트 하 십시오 (저 는 Chrome 76 에서 만 테스트 합 니 다).
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
