Maison > développement back-end > tutoriel php > tutoriel de dessin graphique simple CSS3

tutoriel de dessin graphique simple CSS3

小云云
Libérer: 2023-03-17 14:06:01
original
1767 Les gens l'ont consulté

CSS est Cascading Style Sheets (nom complet anglais : Cascading Style Sheets), un langage informatique utilisé pour exprimer des styles de fichiers tels que HTML (une application du Standard Generalized Markup Language) ou XML (un sous-ensemble du Standard Generalized Markup Language). . CSS peut non seulement modifier statiquement les pages Web, mais peut également coopérer avec divers langages de script pour formater dynamiquement divers éléments des pages Web. CSS peut effectuer un contrôle précis au niveau des pixels sur la disposition des positions des éléments dans les pages Web, prend en charge presque toutes les tailles et styles de police et a la capacité de modifier les objets de page Web et les styles de modèle.

Voici quelques petits cas pour vous apprendre à dessiner des graphiques avec CSS :

<style>
    #triangle {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red blue orange gray;
    }</style><div id="triangle"></div>
Copier après la connexion

L'effet est tel qu'illustré :

tutoriel de dessin graphique simple CSS3

<style>
    #triangle2 {        width: 0;        border-style: solid;        border-width: 50px 50px 50px 50px;        border-color: red red grey grey;
    }</style><div id="triangle2"></div>
Copier après la connexion

L'effet est tel qu'illustré :

tutoriel de dessin graphique simple CSS3

<style>
    #triangle3 {        width: 0;        border-top: 60px solid transparent;        border-right: 100px solid transparent;        border-bottom: 80px solid red;
    }</style><div id="triangle3"></div>
Copier après la connexion

L'effet est tel qu'illustré :

tutoriel de dessin graphique simple CSS3

<style>
    #triangle4 {        width: 0;        border-left: 50px solid transparent;        border-right: 50px solid transparent;        border-bottom: 100px solid red;
    }</style><div id="triangle4"></div>
Copier après la connexion

L'effet est comme indiqué :

tutoriel de dessin graphique simple CSS3

Dessinez un cœur

<style>
    #heart {        float: left;        width: 100px;        height: 90px;        position: relative;
    }    #heart:before,#heart:after {        position: absolute;        top: 0;        content: &#39;&#39;;        width: 50px;        height: 80px;        background: red;        border-radius: 25px 25px 0 0;
    }    #heart:before {        left: 14px;        transform: rotate(-45deg);
    }    #heart:after {        left: 36px;        transform: rotate(45deg);
    }</style><div id="heart"></div>
Copier après la connexion

L'effet est comme indiqué ci-dessous :

tutoriel de dessin graphique simple CSS3

Dessine une flèche

<style>
    #arrow {        margin-top: 105px;        float: left;        width: 0;        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 60px solid red;        position: relative;
    }    #arrow:before,#arrow:after {        position: absolute;        content: &#39;&#39;;
    }    #arrow:before {        border-left: 30px solid transparent;        border-right: 30px solid transparent;        border-top: 20px solid #fff;        left: -30px;        top: -61px;
    }    #arrow:after {        height: 120px;        border-left: 2px solid red;        border-right: 2px solid red;        left: -2px;        top: -161px;
    }</style><div id="arrow"></div>
Copier après la connexion

L'effet est le suivant :

tutoriel de dessin graphique simple CSS3

Dessine une étoile à cinq branches

<style>
    #star-five {        margin: 75px 0 55px 0;        float: left;        width: 0;        height: 0;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        position: relative;
    }    #star-five:before,#star-five:after {        position: absolute;        content: &#39;&#39;;        border-top: 66px solid red;        border-left: 100px solid transparent;        border-right: 100px solid transparent;        top: -66px;        left: -100px;
    }    #star-five:before {        transform: rotate(-72deg);
    }    #star-five:after {        transform: rotate(72deg);
    }</style><div id="star-five"></div>
Copier après la connexion

L'effet est comme indiqué :

tutoriel de dessin graphique simple CSS3

Dessinez une boîte à bulles/une boîte d'invite

<style>
    #prompt {        float: left;        width: 200px;        height: 100px;        margin: 20px 0 40px;        border-radius: 20px;        background: #669;        position: relative;
    }    #prompt:after {        position: absolute;        content: "";        width: 50px;        height: 120px;        border: 0 solid transparent;        border-right: 30px solid #669;        border-radius: 0 0 50px 0;        top: 0;        left: 0;
    }</style><div id="prompt"></div>
Copier après la connexion

L'effet est comme indiqué ci-dessous :

tutoriel de dessin graphique simple CSS3

Dessine un ballon

<style>
   #balloon {        float: left;        width: 160px;        height: 160px;        background: #faf9f9;      
     border-radius: 160px 160px 64px 160px;        transform: rotate(45deg);      
       box-shadow: 0 0 100px 0 rgba(243,98,122,1) inset, 20px 20px 20px rgba(243,98,122,0.3);        position: relative;
   }    #balloon:after {        position: absolute;        content: &#39;&#39;;     
      border: 8px solid transparent;        border-right-color: rgba(243,98,122,0.88);    
          transform: rotate(45deg);        border-radius: 16px;     
             bottom: -2px;        right: -2px;
   }</style><div id="balloon"></div>
Copier après la connexion

L'effet est comme indiqué :

tutoriel de dessin graphique simple CSS3

Dessin Yin et Yang Bagua

<style>
    #yin-yang {            float: left;            width: 48px;            height: 96px;            background-color: #fff;            border-style: solid;            border-color: #000;            border-width: 2px 50px 2px 2px;            border-radius: 50%;            -webkit-animation: Rotate 6s linear infinite; /*旋转*/
            position: relative;
        }        #yin-yang:before,#yin-yang:after {            position: absolute;            content: &#39;&#39;;
        }        #yin-yang:before {            width: 12px;            height: 12px;            background: #fff;            border: 18px solid #000;            border-radius: 50%;            top: 0;            left: 50%;
        }        #yin-yang:after {            width: 12px;            height: 12px;            background: #000;            border: 18px solid #fff;            border-radius: 50%;            top: 50%;            left: 50%;
        }
        @-webkit-keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }
        @keyframes Rotate {
            0%{transform: rotate(360deg)}
            100%{transform: rotate(0deg)}
        }</style><div id="yin-yang"></div>
Copier après la connexion

L'effet est le suivant :

tutoriel de dessin graphique simple CSS3

CSS fournit une description de style pour le langage de balisage HTML, qui définit la façon dont les éléments sont affichés . CSS est une avancée majeure dans le domaine de la conception Web. Il peut être utilisé pour modifier un petit style afin de mettre à jour tous les éléments de page qui lui sont liés. Voir les petits graphiques dessinés ci-dessus. N'est-ce pas étonnant ? Ces tutoriels sont très simples et adaptés aux débutants.

Tutoriels associés :

Exemples d'implémentation du dégradé de couleurs de texte en CSS

Explication détaillée des détails en CSS

Un exemple d'utilisation de CSS et JS pour implémenter des effets d'animation lors du chargement d'une page Web

Un exemple d'utilisation de CSS pour implémenter un mouvement circulaire d'un petit ball

Résumé sur l'utilisation des sélecteurs en css

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal