Exemple de code d'utilisation de CSS pour dessiner un cœur-tutoriel CSS-php.cn

Exemple de code d'utilisation de CSS pour dessiner un cœur

巴扎黑

Libérer： 2017-03-14 10:32:30

original

5331 Les gens l'ont consulté

Aujourd'hui, Xiaoying partagera avec vous un cœur dessiné avec CSS. Le code et le processus de production sont ci-dessous. J'espère que cela sera utile à tout le monde.

Étape 1 :

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

Exemple de code d'utilisation de CSS pour dessiner un cœur

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

Copier après la connexion

Étape 2 :

Utilisez les pseudo éléments avant et :après pour dessiner un carré à gauche et en haut du carré, puis utilisez border-radius : 50% ;Attribut , modifiez ces deux carrés, puis obtenez deux cercles, comme indiqué sur l'image :

Exemple de code d'utilisation de CSS pour dessiner un cœur

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

Copier après la connexion

Utiliser le rayon de bordure : 50 % ; Attributs :

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

Copier après la connexion

Étape 3 :

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

Exemple de code d'utilisation de CSS pour dessiner un cœur

.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);
        }

Copier après la connexion

Xiaoying n'a pas donné à la couleur de fond du cercle et à la couleur de fond du carré la même couleur, afin que tout le monde puisse mieux voir le Rendu évident, puis Xiaoying définit la couleur de fond pour qu'elle soit uniforme, et l'amour final sort, comme le montre l'image :

Exemple de code d'utilisation de CSS pour dessiner un cœur

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

Copier après la connexion

Ce qui précède est une explication détaillée du processus d'utilisation de CSS pour dessiner des cœurs présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur le fera. vous répondrons à temps. Je tiens également à vous remercier tous pour votre soutien au site Script House !

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!