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

이 글은 애니메이션 효과를 얻기 위해 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>

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

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>

효과는 다음과 같습니다.

추천 관련 기사:

순수한 CSS를 사용하여 녹색 돼지 효과를 얻는 방법

CSS로 이미지를 확대하는 방법은 무엇인가요? (멋진 특수효과의 예)

위 내용은 애니메이션 효과를 얻기 위해 HTML과 CSS3에서 2D와 3D를 결합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!