Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)-tutoriel CSS-php.cn

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

青灯夜游

Libérer： 2018-09-13 16:42:51

original

2598 Les gens l'ont consulté

Ce chapitre vous montre comment dessiner un cœur battant en utilisant du CSS pur ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Laissez-moi d'abord vous montrer les rendus :

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

Principe de mise en œuvre :

1. deux Rectangle ;

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

Définissez respectivement le rayon de bordure

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

Une fois les deux graphiques superposés, définissez respectivement transform: rotate ; (), la valeur set rotate() doit être opposée, une valeur positive et une valeur négative

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

Lors de la définition de la valeur gauche de l'une d'elles, elle devient

Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

Afin d'avoir un aspect tridimensionnel, vous pouvez définir l'ombre de la boîte sur la gauche

Utilisez ensuite @keyframes et transformez les attributs pour obtenir un effet de saut ; .

Exemple de code :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>纯css画一下心</title>
		<style>
			body{
                height: 100%;
                margin: 0;
            }
            .demo{
                width: 1px;
                height: 1px;
                margin: 300px auto;
                position: relative;
                animation: tiaodong .8s linear infinite;
            }
            .demo::before,.demo::after{
                content: &#39;&#39;;
                position: absolute;
                width: 80px;
                height: 120px;
                background-color: red;
                border-radius: 50px 50px 0 0;
            }
           .demo::after{
                left: 28px;
                transform: rotate(45deg);
            }
             .demo::before{
                transform: rotate(-45deg);
                box-shadow: -5px -5px 10px grey;
            }
            @keyframes tiaodong{
                0%{
                    transform: scale(1);
                }
                50%{
                    transform: scale(1.05);
                }
                100%{
                    transform: scale(1);
                }
            }
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

Copier après la connexion

est implémenté en utilisant des pseudo-éléments after et before, sans tenir compte de la compatibilité, et ne sera pas affiché avant IE 10.

Peut être résolu en remplaçant après et avant par des éléments span.

Besoin d'ajouter : -ms-transform.

Si vous utilisez des éléments span pour dessiner, vous devez définir l'attribut z-index sur le bloc de droite.

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!