Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code)-tutoriel CSS-php.cn

Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code)

易达

Libérer： 2020-07-01 15:27:28

original

2338 Les gens l'ont consulté

Objectifs de cet article :

1. Maîtriser la rotation des éléments en CSS3

Questions :

1. Obtenir les effets suivants et utiliser du DIV+CSS pur.

Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code)

Notes supplémentaires :

1. Le cercle rose avec le papillon est une image

2. au milieu est composé de 4 demi-cercles générés par rotation. Le diamètre de chaque demi-cercle est de 180px

Faisons maintenant l'opération spécifique

Préparons le matériel : Le matériel dans le cas actuel. est un cercle rose avec un papillon

Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code)

2. Créez index.html et écrivez l'architecture

Analyse de l'idée :

1. La couche cible externe est un div. L'image d'arrière-plan du div est un cercle rose avec un papillon

2. Le div contient une fleur à 4 couleurs, donc la fleur est composée de 5 parties, 4 pétales + 1 petit cœur trou blanc

D'accord, écrivez d'abord l'idée en fonction de l'analyse, et ignorez l'implémentation du CSS pour le moment

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>CSS旋转案例</title>
</head> 
<body>
<div class="wrapper">
    <div class="bottole">
        <div class="leaf leaf2"></div>
        <div class="leaf leaf3"></div>
        <div class="leaf leaf4"></div>
        <div class="leaf"></div>
        <div class="smallcircle"></div>
    </div>
</div>
</body>
</html>

Copier après la connexion

3 Écrivez le. style, créez le dossier css et créez-y un nouveau index.css

Analyse de l'idée :

.container * Style public

.wrapper *{
    margin:0;
    padding:0;
}

Copier après la connexion

.bottole external div settings

1 Parce que nous devons nous assurer que l'arrière-plan est entièrement affiché, il doit donc être plus grand que l'image d'arrière-plan

2. L'image d'arrière-plan ne peut pas être répétée

  .bottole{
    width: 640px;
    height: 420px;
    background-image: url(../images/Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code));
    background-repeat: no-repeat;
    background-position-x: 40px;
    background-position-y: -35px;
  }

Copier après la connexion

.feuille de demi-cercle

1 Parce que le diamètre du demi-cercle est de 180, la hauteur doit être de 90px, et ensuite nous pouvons réaliser le demi-cercle à travers la bordure. -radius, et nous définissons la couleur par défaut comme orange. Afin que les quatre demi-cercles se chevauchent, vous devez utiliser position:absolute, puis vous devez définir margin-left et margin-top pour que leur position présente l'effet cible ( ici, nous pouvons l'obtenir grâce à un débogage continu)

  .wrapper .leaf {
    width: 180px;
    height: 90px;
    border-radius: 180px 180px 0 0;
    background-color: orange;
    position: absolute;
    margin-left: 100px;
    margin-top: 150px;
  }

Copier après la connexion

.leaf2 Les feuilles sont définies individuellement

1 La couleur de la feuille est verte et doit être tournée de 90 degrés

.wrapper .leaf2 {
    background: green;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }

Copier après la connexion

<. 🎜>.leaf3 Feuilles définies individuellement

1. La couleur de la feuille est bleue et doit être tournée de 180 degrés

  .wrapper .leaf3 {
    background: blue;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

Copier après la connexion

.leaf4 Feuilles définies individuellement

1 , la la couleur de la feuille est rouge et l'angle qui doit être tourné est de 270 degrés

  .wrapper .leaf4 {
    background: red;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }

Copier après la connexion

Réglage du centre de la fleur à petit trou rond

1 La taille du petit trou rond est de 20, nous. peut faire un div de taille 20, et ensuite le rayon-bordure est également de 20 pour faire un cercle

2. La couleur de fond est blanche

3. Afin de positionner le trou au centre de la fleur, nous devons définir margin-left, margin -top

  .smallcircle{
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    margin-left: 180px;
    margin-top: 190px;
  }

Copier après la connexion

D'accord, jusqu'à présent, nous avons écrit tous les styles auxquels nous avons pensé. Si les détails ne sont pas corrects, nous le modifierons à nouveau<. 🎜>

Jusqu'à présent, tous les contenus CSS sont les suivants :

.wrapper *{
    margin:0;
    padding:0;
}
.bottole{
    width: 640px;
    height: 420px;
    border-radius: 400px;
    background-image: url(../images/Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code));
    background-repeat: no-repeat;
    background-position-x: 40px;
    background-position-y: -35px;
  }
  .wrapper .leaf {
    width: 180px;
    height: 90px;
    border-radius: 180px 180px 0 0;
    background-color: orange;
    position: absolute;
    margin-left: 100px;
    margin-top: 150px;
  }
.wrapper .leaf2 {
    background: green;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  .wrapper .leaf3 {
    background: blue;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  .wrapper .leaf4 {
    background: red;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
  .smallcircle{
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 20px;
    position: absolute;
    margin-left: 180px;
    margin-top: 190px;
  }

Copier après la connexion

Introduisez le CSS dans index.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>CSS旋转案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 
<body>
<div class="wrapper">
    <div class="bottole">
        <div class="leaf leaf2"></div>
        <div class="leaf leaf3"></div>
        <div class="leaf leaf4"></div>
        <div class="leaf"></div>
        <div class="smallcircle"></div>
    </div>
</div>
</body>
</html>

Copier après la connexion

L'effet d'exécution est le suivant :

Déformation-rotation CSS3 pour obtenir une analyse de cas de fleurs en 4 couleurs (exemple de code) Résumé :