Maison >interface Web >tutoriel CSS >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:512624parcourir
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 :
 "153682704622315Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)")
Principe de mise en œuvre :
1. deux Rectangle ;
 "153682738011893Comment dessiner un cœur battant en utilisant du CSS pur (exemple de code)")
Définissez respectivement le rayon de bordure
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
 "153682774316128Comment 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
 "153682780259903Comment dessiner un cœur battant en utilisant du CSS pur (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: '';
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!