Maison  >  Article  >  interface Web  >  CSS dessine un coeur rouge

CSS dessine un coeur rouge

php中世界最好的语言
php中世界最好的语言original
2018-03-22 11:14:092468parcourir

Cette fois je vais vous apporter du CSS pour dessiner un coeur rouge. Quelles sont les précautions pour dessiner un coeur rouge avec CSS Voici un cas pratique, jetons un oeil.

Étape 1 :

Dessinez d'abord un carré. Comme le montre l'image :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css画桃心</title>
    <style media="screen">
        .heart-body {
            width: 500px;
            margin: 100px auto;
            position: relative;
        }
        .heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
        }
    </style>
</head>
<body>
    <p class="heart-body">
        <p class="heart-shape"></p>
    </p>
</body>
</html>

La deuxième étape :

utilisera des pseudo-éléments avant et : Après, dessinez un carré à gauche et en haut du carré, puis utilisez l'attribut border-radius: 50%; pour modifier les deux carrés, et vous obtiendrez alors deux cercles, comme indiqué dans l'image :

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            background-color: #ffc0cb;
        }
        .heart-shape:before {
            left: -45px;
        }
        .heart-shape:after {
            top: -45px;
        }

Utiliser le rayon de bordure : 50 % ; Attribut :

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果;谷歌,等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #ffc0cb;
        }

Étape 3 :

P avec le nom de la classe : heart-shape Utilisez l'attribut transform: rotate(45deg); pour les faire pivoter de 45 degrés, comme indiqué dans la figure :

.heart-shape {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #f70e0e;
            -webkit-transform: rotate(45deg);
            /* Safari 和 Chrome */
            -moz-transform: rotate(45deg);
            /* Firefox */
            -ms-transform: rotate(45deg);
            /* IE 9 */
            -o-transform: rotate(45deg);
            /* Opera */
            transform: rotate(45deg);
        }

Xiaoying n'a pas donné à la couleur de fond du cercle et à la couleur de fond du carré une couleur unifiée afin que tout le monde puisse mieux voir l'effet évident. Ensuite, Xiaoying définit l'arrière-plan. couleur. dans l'unité, l'amour final sortira, comme le montre l'image :

.heart-shape:before,
        .heart-shape:after {
            position: absolute;
            content: '';
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50%;
            /**兼容苹果;谷歌,等一些浏览器认*/
            -moz-border-radius: 50%;
            /**兼容火狐浏览器*/
            -o-border-radius: 50%;
            /**兼容opera浏览器*/
            border-radius: 50%;
            background-color: #f70e0e;
        }

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. . Veuillez prêter attention aux choses plus excitantes. Autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation du sélecteur multi-classe CSS3

Explication détaillée de l'utilisation de CSS background-attachment

Liste de prix pour l'implémentation de Bootstrap

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!

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