recherche

Maison  >  Article  >  interface Web  >  Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)

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

青灯夜游
青灯夜游original
2018-09-13 16:42:512579parcourir

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

css border 伪元素 transform
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser word-break:break-all pour forcer une nouvelle ligne ?Article suivant：Comment utiliser word-break:break-all pour forcer une nouvelle ligne ?

Articles Liés

Voir plus