Introduction aux nouvelles fonctionnalités et méthodes CSS3 pour dessiner des graphiques courants-tutoriel CSS-php.cn

Introduction aux nouvelles fonctionnalités et méthodes CSS3 pour dessiner des graphiques courants

高洛峰

Libérer： 2017-03-20 16:33:11

original

1478 Les gens l'ont consulté

Avant-propos : je prévois de créer ma propre page Web récemment. Dans le brouillon de conception, navigation je prévois de la concevoir comme un rectangle, et il y a aussi des rectangles affichés en style de survol, y compris certains avatars. , etc. En plus de dessiner des cercles, je n’ai jamais vraiment dessiné sérieusement d’autres formes auparavant. Aujourd’hui, je vais dessiner quelques formes courantes que nous voyons.

Avant cela, nous devons comprendre ce qu'est un pseudo-élément (différent de celui-ci, il existe un autre concept appelé pseudo-classe , les deux sont faciles à confondre), sans lequel les graphiques ne peuvent pas être dessinés .

a) Pseudo-éléments : utilisés pour insérer des éléments supplémentaires avant et après les éléments de contenu. La raison pour laquelle ils sont appelés pseudo-éléments est qu'ils ne sont pas du tout générés dans le document et ne peuvent être visibles que de l'extérieur, par exemple. : lorsque vous appuyez sur F12, pouvez-vous le voir dans la zone de code à droite ?

Les deux pseudo-éléments utilisés ici ①Avant l'élément:avant ②Après l'élément:après

1) Cercle, non Si nécessaire, regardons le triangle

/* CSS */
.sanjiao {
        width: 0px;
        height: 0px;
        margin: 30px auto;
        position: relative;
        border: 100px solid transparent;
        border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/
        /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */
        border-right: 100px solid #5E5E5E;
        border-top: 100px solid #3C98D1;*/
    }


/* HTML */<p class="sanjiao"></p>

Copier après la connexion

2) Cylindre

/* CSS */
.yuanzhu {
       position: relative;
       height: 200px;
       width: 50px;
       background: #5E5E5E;
       margin: 30px auto;
       z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */
    }
.yuanzhu:before {
				　　　　position: absolute;
				　　　　top: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #A8A8A8;
				　　　　z-index: 99
			　　}
.yuanzhu:after {
				　　　　position: absolute;
				　　　　bottom: -10px;
				　　　　content: "";
				　　　　width: 50px;
				　　　　height: 20px;
				　　　　border-radius: 50%;
				　　　　background: #5E5E5E;
				　　　　z-index: 9
			　　}

/* HTML */
<div class="yuanzhu"></div>

Copier après la connexion

3) Pentacle

Pour dessiner une étoile à cinq branches, il faut d'abord savoir que parmi les styles suivis de plusieurs préfixes privés du navigateur, "deg" représente l'angle de rotation. Par exemple, "45deg" représente une rotation de 45 degrés dans le sens des aiguilles d'une montre, et Le négatif représente le sens inverse des aiguilles d'une montre.

rotate est l'un des attributs de transform, qui représente la rotation 2D, c'est-à-dire la rotation bidimensionnelle. Il en a également trois. -rotation dimensionnelle, transform a également plusieurs autres fonctionnalités s'ils sont bien utilisés, les effets spéciaux produits sont assez élevés

/* CSS */
.wujiaox {
         width: 0px;
         height: 0px;
         position: relative;
         margin: 30px auto;
         border: 100px solid transparent;
         border-bottom: 70px solid #5E5E5E;
         -webkit-transform: rotate(35deg);/* Safari和Chrome */
         -moz-transform: rotate(35deg);/* Firefox */
　　　　　-ms-transform: rotate(35deg);/* IE 9 */
　　　　　-o-transform: rotate(35deg); /* Opera */
　　}
　　.wujiaox:after {
				　　　　　　content: "";
				　　　　　　width: 0px;
				　　　　　　height: 0px;
				　　　　　　display: block;
				　　　　　　border-right: 100px solid transparent;
				　　　　　　border-bottom: 70px solid #5E5E5E;
				　　　　　　border-left: 100px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: 3px;
				　　　　　　left: -105px;
				　　　　　　-webkit-transform: rotate(-70deg);
				　　　　　　-moz-transform: rotate(-70deg);
				　　　　　　-ms-transform: rotate(-70deg);
				　　　　　　-o-transform: rotate(-70deg);
			　　　}

　　.wujiaox:before {
				　　　　　　content: "";
				　　　　　　width: 0;
				　　　　　　height: 0;
				　　　　　　border-bottom: 80px solid #5E5E5E;
				　　　　　　border-left: 30px solid transparent;
				　　　　　　border-right: 30px solid transparent;
				　　　　　　position: absolute;
				　　　　　　top: -45px;
				　　　　　　left: -65px;
				　　　　　　-webkit-transform: rotate(-35deg);
				　　　　　　-moz-transform: rotate(-35deg);/* 逆时针旋转35度 */
				　　　　　　-ms-transform: rotate(-35deg);
				　　　　　　-o-transform: rotate(-35deg);
			　　　　}
/* HTML */
<div class="wujiaox"></div>

Copier après la connexion

Lorsque vous dessinez une étoile à cinq branches, soyez prudent et assurez-vous. pour en définir un contenu :""; Sinon, vous ne pourrez pas voir le style affiché par les éléments de pseudo-classe ; les deux éléments de pseudo-classe doivent être définis sur positionnement absolu ; , et l'élément parent est défini sur relatif.

4) Boîte de discussion

<span style="color: #000000">/* CSS */<br/>　　　　　　.chatBox {
                width: 200px;
                height: 50px;
                margin: 30px auto;
                background: #5E5E5E;
                border-radius: 5px;
                position: relative;
            }
            
            .chatBox:before {
                content: "";
                position: absolute;
                width: 0px;
                height: 0px;
                right: 100%;
                top: 15px;
                border-top: 8px solid transparent;
                border-right: 10px solid #5E5E5E;
                border-bottom: 8px solid transparent;
            }            <br/>/* HTML */<br/><p class="chatBox"></p> </span>

Copier après la connexion

5) Le diagramme Bagua est en fait un grand demi-cercle composé de deux petits cercles

/* CSS */
　　　　　　.bagua {
                width: 96px;
                height: 48px;
                background: #eee;
                margin: 30px auto;
                border-color: #000000;
                border-style: solid;
                border-radius: 100%;
                border-width: 0.5px 0.5px 50px 0.5px;
                position: relative;
            }
            
            .bagua:before {
                content: "";
                border-radius: 100%;
                background: #FFFFFF;
                position: absolute;
                top: 50%;
                left: 0px;
                border: 18px solid #000000;
                width: 12px;
                height: 12px;
            }
            
            .bagua:after {
                content: "";
                border-radius: 100%;
                background: #000000;
                position: absolute;
                top: 50%;
                left: 50%;
                border: 18px solid #eee;
                width: 12px;
                height: 12px;
            }


/* HTML */<p class="bagua"></p>

Copier après la connexion

6) Graphiques "Maçonnerie"

Dessinez d'abord un trapèze à angle droit, puis dessinez un triangle en dessous à travers un pseudo- éléments de classe

/* CSS */
　　　　　　.zhuanshi {
                width: 50px;
                height: 0;
                border-style: solid;
                margin: 30px auto;
                border-width: 0 25px 25px 25px;
                position: relative;
                border-color: transparent transparent #5E5E5E transparent;
            }
            
            .zhuanshi:after {
                content: "";
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 70px 50px 0 50px;
                border-color: #5E5E5E transparent transparent transparent;
                position: absolute;
                top: 25px;
                left: -25px;
            }

/* HTML */<p class="zhuanshi"></p>

Copier après la connexion

En CSS3 Il existe également de nombreuses méthodes graphiques qu'il faut étudier lentement Bien qu'elles soient rarement utilisées, il est toujours très intéressant de dessiner quand on s'ennuie

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!