Combiner la 2D et la 3D en HTML et CSS3 pour obtenir des effets d'animation

Cet article vous présente la combinaison de la 2D et de la 3D en HTML et CSS3 pour obtenir des effets d'animation. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Bien que nous ne soyons généralement pas habitués aux effets d'animation 2D et 3D dans le travail front-end, nous utilisons essentiellement JS ou jQ pour compléter ces effets d'animation, mais les plus basiques L'avez-vous oublié ?

J'ai examiné ces choses hier et écrit deux petits exemples

1 Utilisez CSS pour dessiner un cœur

Définissez d'abord un div en HTML,

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

Tout ce dont vous avez besoin est un p, j'utilise des pseudo éléments pour le dessiner ;

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

Grâce au code ci-dessus, nous obtenons un cœur prospère

2 . Utilisez CSS pour dessiner un diagramme de Tai Chi et ajoutez une animation pour le faire pivoter automatiquement

Comme la forme de cœur ci-dessus, j'utilise toujours des pseudo-éléments pour l'écrire

Définissez d'abord un div et un nom. it taiji

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

Ensuite, utilisez des pseudo-éléments et voyez comment je le crée. Sans plus tarder, passons directement au 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>

L'effet est le suivant :

Articles connexes recommandés :

Comment utiliser du CSS pur pour obtenir l'effet d'un cochon vert

Comment agrandir des images avec CSS ? (Exemple d'effets spéciaux sympas)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!