Maison >interface Web >tutoriel CSS >Comment faire un coeur rouge avec CSS
Comment faire un coeur rouge avec CSS
- 藏色散人original
- 2021-02-28 15:17:062318parcourir
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.
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;
}
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;
}
[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;
}
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;
}
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>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!