Explication graphique détaillée sur la façon d'utiliser HTML et CSS pour créer des effets d'amour

Le CSS joue un rôle très important dans la mise en page. Le CSS peut non seulement embellir les pages construites avec HTML, mais peut également créer divers effets sympas. En tant qu'équipe frontale, pouvez-vous utiliser CSS pour dessiner des cœurs ? Cet article vous expliquera comment dessiner une forme de cœur en utilisant HTML et CSS, ainsi que le code pour implémenter l'effet d'amour en utilisant CSS3. Il a une certaine valeur de référence et les amis intéressés peuvent y jeter un œil.

Dessiner des cœurs en HTML et CSS nécessite l'utilisation de nombreuses propriétés en CSS, telles que le rayon de bordure, le positionnement, l'animation, etc. Si vous n'êtes pas clair, vous pouvez lire mon article précédent ou visiter . Tutoriel vidéo CSS, j'espère que cela pourra vous aider !

Explication avec des exemples : Un cœur peut être vu comme composé de deux cercles et d'un carré. La longueur du côté du carré est le diamètre du cercle.

Partie HTML :

Utilisez trois divs pour représenter respectivement le cercle gauche, le cercle droit et le carré

<div class="box">
   <div class="round1"></div>
   <div class="round2"></div>
   <div class="bottom"></div>
</div>

Partie CSS :

Utilisez la bordure- radius :50% Définissez-le sur un cercle, utilisez transform:rotate(45deg) pour faire pivoter le carré de 45 degrés et combinez-le avec le cercle pour former une forme de cœur

.box{
    width:180px;
    height:160px;
    margin:100px auto;
    animation:size 1s infinite;
    animation-direction:alternate;
    transition:1s all;
    border: 1px solid black;
   }
   .round1{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    left: 0;
    top: 0;
    position:absolute;
   }
   .round2{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:hotpink;
    position:absolute;
    right: 0;
    top: 0;
   }
   .bottom{
    width:100px;
    height:100px;
    background-color:hotpink;
    position:absolute;
    top:40px;
    left:40px;
    transform:rotate(45deg);
   }
   @keyframes size{
    0%{
     transform:scale(0.6);
    }
    100%{
     transform:scale(1);
    }
   }

Enfin, utilisez l'animation d'animation dans CSS3 pour obtenir l'effet d'amour, afin que l'amour puisse être automatiquement mis à l'échelle, l'effet est comme indiqué ci-dessous :

Ce qui précède présente comment dessiner un amour en utilisant html et CSS .C'est relativement simple. Les débutants doivent l'essayer par eux-mêmes. Voyez si vous pouvez dessiner un cœur, j'espère que cet article vous aidera ! Pour plus de didacticiels vidéo connexes, veuillez visiter Tutoriel vidéo CSS3

Plus de codes d'effets spéciaux CSS3, html5 et javascript sympas, le tout dans : collection d'effets spéciaux js

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!