애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합-HTML 튜토리얼-php.cn

애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합

不言

풀어 주다： 2018-08-09 14:36:07

원래의

2671명이 탐색했습니다.

이 글은 애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프론트엔드 작업에서는 일반적으로 2D, 3D 애니메이션 효과를 사용하지 않지만 이러한 애니메이션 효과를 완성하기 위해 기본적으로 JS나 JQ를 사용하는데 가장 기본적인 것을 잊으셨나요?

어제 이 내용을 검토하고 두 가지 작은 예제를 작성했습니다.

1. CSS를 사용하여 하트를 그립니다

먼저 HTML에서 div를 정의합니다.

<div class="heart"></div>

로그인 후 복사

p만 있으면 의사 요소를 사용하여 그립니다.

  <style>
        /* 基于父级定位 */
    .heart{
     position: relative;
    }
    /* 使用伪元素画出两个图像,使用图形拼接来造出一个心 */
    .heart::after,
    .heart::before{
        content: "";
        position: absolute;
        top: 100px;
        left: 0;
        right: 0;
        margin: auto;
        width: 50px;
        height: 80px;
        background: red;
        /* borde-radius 有四个值 分别对应四个角，分别对应 左上 右上 右下 左下 */
        border-radius: 50px 50px 0 0;  
 
        /* 旋转元素，两个一起旋转。等下只需要调动一个即可 */
        transform: rotate(-45deg);
        transform-origin: 0 100%;        
    }
    /* 旋转元素 使它和before伪元素 拼接成一个心 */
    .heart::after{
        left: -100px;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
    }
    </style>

로그인 후 복사

를 통해 위의 코드는 번영하는 심장을 얻습니다

애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합

2. CSS를 사용하여 태극권 다이어그램을 그리고 애니메이션을 추가하여 자동으로 회전하도록 합니다

위의 심장을 그리는 것과 동일합니다. 여전히 의사 요소를 사용하여 작성합니다

먼저 div를 정의하고 이름을 taiji

<div id="taiji"></div>

로그인 후 복사

로 지정한 다음 가상 요소를 사용하여 어떻게 생성하는지 살펴보세요. 더 이상 고민하지 말고 바로 코드로 넘어가겠습니다

<style type="text/css">
        #taiji {
            position: relative;
            width: 200px;
            height: 100px;
            background: white;
            border-color: black;
            border-style: solid;
            border-width: 4px 4px 100px 4px;
                  /*变成圆形*/
            border-radius: 50%;
       
            margin: 100px auto;
               /* 定义动画 名称 时长  匀速 无限循环播放 */
            animation: myfirst 4s linear infinite;
            
        }
 
        #taiji::before,
        #taiji::after {
            content: " ";
            position: absolute;
            top: 50%;
            left: 0;
            width: 25px;
            height: 25px;
            background: white;
            border: 38px solid black;
            
            border-radius: 50%;
        }
 
        #taiji::after {
            left: 50%;
            background: black;
            border-color: white;
        }
 
        /* 定义动画 */
 
        @keyframes myfirst {
            0% {
                
                transform: rotate(0deg);
            }
            100% {
           
                transform: rotate(360deg);
            }
 
        }
    </style>

로그인 후 복사

효과는 다음과 같습니다.

애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합