Kombination von 2D und 3D in HTML und CSS3, um Animationseffekte zu erzielen

Dieser Artikel führt Sie in die Kombination von 2D und 3D in HTML und CSS3 ein. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.

Obwohl wir in der Front-End-Arbeit im Allgemeinen nicht für 2D- und 3D-Animationseffekte verwendet werden, verwenden wir grundsätzlich JS oder jQ, um diese Animationseffekte zu vervollständigen, aber die grundlegendsten. Haben Sie es vergessen?

Ich habe diese Dinge gestern überprüft und zwei kleine Beispiele geschrieben

1. Verwenden Sie CSS, um ein Herz zu zeichnen

Definieren Sie zunächst ein Div in HTML,

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

Alles, was Sie brauchen, ist ein p, ich verwende Pseudoelemente, um es zu zeichnen;

  <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>

Durch den obigen Code erhalten wir ein wohlhabendes Herz

2. Verwenden Sie CSS, um Zeichnen Sie ein Tai-Chi-Diagramm und fügen Sie eine Animation hinzu, damit es sich automatisch dreht

Wie bei der Herzform oben verwende ich immer noch Pseudoelemente, um es zu schreiben

Definieren Sie zuerst ein Div und nennen Sie es Taiji

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

und dann Pseudoelemente verwenden, um zu sehen, wie ich es erstelle. Fügen Sie ohne weiteres einfach den Code

<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>

hinzu und der Effekt ist wie folgt:

Empfohlene verwandte Artikel:

Wie verwende ich reines CSS, um den Effekt eines grünen Schweins zu erzielen

Wie vergrößere ich Bilder mit CSS? (Beispiel für coole Spezialeffekte)

Das obige ist der detaillierte Inhalt vonKombination von 2D und 3D in HTML und CSS3, um Animationseffekte zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!