Comment faire un coeur rouge avec CSS-tutoriel CSS-php.cn

Comment faire un coeur rouge avec CSS

藏色散人

Libérer： 2023-01-03 09:26:05

original

2287 Les gens l'ont consulté

Comment créer un cœur rouge avec CSS : créez d'abord un exemple de fichier HTML ; puis définissez un div et dessinez un cercle à travers les attributs CSS ; puis créez un carré et enfin utilisez l'attribut rotate dans la transformation CSS ; le style amoureux.

Comment faire un coeur rouge avec CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Utiliser CSS pour faire l'amour

Résumé : les balises HTML sont relativement simples et la mise en route est très rapide, mais CSS est quelque chose qui nous oblige à En creusant plus profondément, de nombreux attributs de style peuvent être obtenus en maîtrisant quelques-uns couramment utilisés pour obtenir de beaux effets. Je vais maintenant vous apprendre à utiliser CSS pour créer un cœur.

Connaissances préliminaires :

Comprendre comment dessiner un carré.
Comprendre comment dessiner des cercles.
Comprendre ce qu'est le positionnement.
Comprendre comment faire pivoter.

Sans plus tarder, laissez-moi d'abord vous apprendre à dessiner un cercle en utilisant CSS.

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

Copier après la connexion

Puisque notre amour est composé de deux cercles et d'un carré, nous avons besoin d'un autre cercle.

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

Copier après la connexion

[Recommandé : "Tutoriel vidéo CSS"]

Dans la troisième étape, nous devons créer un carré.

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

Copier après la connexion

L'effet de cela est fondamentalement sorti, mais nous devons encore ajuster l'angle de l'amour. À ce stade, nous devons utiliser l'attribut rotate dans la transformation dans notre style CSS.

Puisque nous devons faire pivoter les trois p par angle, nous mettons ces trois p à l'intérieur d'un p. Le code spécifique est le suivant :

.main{
    transform: rotate(45deg);
    margin: 300px;
}

Copier après la connexion

A présent, notre amour est fait. Le rendu est le suivant :

Tous les codes sont les suivants (y compris le code HTML et le code CSS)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link href="css/square.css" rel="stylesheet" type="text/css">
        <title></title>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

Copier après la connexion

rrree

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!