CSS 3의 2차원, 3차원, 그라데이션 처리에 대한 간단한 요약 및 효과 (애니메이션은 게시가 어렵습니다.)

1. 움직이지 않고, 지역 내 변화(본질적으로 사진 제작)

/*그라디언트

          1 직사각형의 그라데이션에 대해 먼저 직사각형의 너비와 높이를 정의합니다(더 나은 관찰을 위해 테두리를 추가하는 것이 가장 좋습니다)

                                                                                                           /

배경 이미지 활용: -webkit-linear-gradient(오른쪽 상단, 빨간색 50%, 파란색 50%);

2 큰 원, 중간 원, 작은 원의 색이 변합니다. 먼저 큰 원을 만들어 보세요

/*안쪽에서 바깥쪽으로 차례대로 색을 채워주세요*/

                                                                                               >                                                   );             /*직사각형에 원형 그라데이션을 사용할 수도 있습니다*/

3반성

.testb{

배경 이미지: url(img/5.jpg);

높이: 200px;

/*방향 간격 그라데이션*/

/*위 위 아래*/

/*1 반사는 문서 흐름의 공간을 차지하지 않습니다.

2 반사는 라벨(너비 및 높이)을 기준으로 합니다*/

-webkit-box-reflect: 20px 이상 -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%) ;

}

4개의 테두리는 상대적으로 넓으며 4개의 프레임의 색상이 다릅니다. 만남의 모서리에는 서로 다른 색상의 삼각형이 형성됩니다.

5 5

border-radius: 50px 0 50px 50px; 둥근 모서리를 자르는 데 사용됩니다.

타원 만들기

.textG{

너비: 200px;

높이: 100px;

테두리 반경: 100px 100px 100px 100px/50px 50px 50px 50px;

}

2. 2차원 평면에서의 움직임

.test{

transform:rotate(0deg) 번역(0px,0px) scale(1);(회전, 번역, 크기 조정)                                                                                                 ~

.test:hover{transform:rotate(720deg) 번역(500px,300px) scale(2);}

세 가지 효과를 따로 사용할 수도 있고 순서에 따라 효과가 다릅니다

3. 3차원 공간에서의 애니메이션 효과

body{perspective:1000px;}/*몸에 원근점 추가*/

                                                                                                     >                                                                             

                                                                                                >                                                                                                                                       

.test:hover{transform:rotate(720deg) move(500px,300px) scale(2);}(변경 후 위치) /*3D 효과가 켜져 있을 때 Z축 효과를 설정할 수 있습니다*/

4. 프레임 애니메이션 @keyframes 애니메이션 이름(직접 선택){

0%(from){변형:…}

                                                                          

                                                                          

100%(에){변형:…}

}

 

.test:hover{

/*애니메이션 효과는 전환과 동일하게 지정됩니다*/

애니메이션:1초 용이성 이동; /*애니메이션 실행을 위한 단어 수 무한 루프 */

애니메이션 반복 횟수: 무한;

}