Einfaches CSS3-Tutorial zum grafischen Zeichnen

CSS ist Cascading Style Sheets (englischer vollständiger Name: Cascading Style Sheets), eine Computersprache, die zum Ausdrücken von Dateistilen wie HTML (eine Anwendung der Standard Generalized Markup Language) oder XML (eine Teilmenge der Standard Generalized Markup Language) verwendet wird. . CSS kann Webseiten nicht nur statisch ändern, sondern auch mit verschiedenen Skriptsprachen zusammenarbeiten, um verschiedene Elemente von Webseiten dynamisch zu formatieren. CSS kann das Layout von Elementpositionen in Webseiten präzise auf Pixelebene steuern, unterstützt fast alle Schriftgrößen und -stile und verfügt über die Möglichkeit, Webseitenobjekte und Modellstile zu bearbeiten.

Hier sind ein paar kleine Beispiele, die Ihnen zeigen, wie Sie einige Grafiken mit CSS zeichnen:

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

Der Effekt ist wie gezeigt:

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

Der Effekt ist wie gezeigt:

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

Der Effekt ist wie gezeigt:

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

Der Effekt ist wie gezeigt:

Zeichne ein Herz

<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>

Der Effekt ist wie unten gezeigt:

Zeichne einen Pfeil

<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>

Der Effekt ist wie folgt:

Zeichne einen fünfzackigen Stern

<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>

Der Effekt ist wie gezeigt:

Zeichnen Sie eine Blasenbox/Eingabeaufforderungsbox

<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>

Der Effekt ist wie unten gezeigt :

Zeichne einen 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>

Der Effekt ist wie gezeigt:

Zeichnung Yin und 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>

Der Effekt ist wie gezeigt:

CSS stellt eine Stilbeschreibung für die HTML-Auszeichnungssprache bereit und definiert, wie die darin enthaltenen Elemente sind angezeigt. CSS ist ein Durchbruch im Bereich Webdesign. Es kann verwendet werden, um einen kleinen Stil zu ändern, um alle damit verbundenen Seitenelemente zu aktualisieren. Sehen Sie sich die kleinen Grafiken oben an. Diese Tutorials sind sehr einfach und für Anfänger geeignet.

Verwandte Tutorials:

Beispiele für die Implementierung von Textfarbverläufen in CSS

Detaillierte Erläuterung der Details in CSS

Ein Beispiel für die Verwendung von CSS und JS zur Implementierung von Animationseffekten während des Ladens einer Webseite

Ein Beispiel für die Verwendung von CSS zur Implementierung von Kreisbewegungen einer kleinen Seite Ball

Zusammenfassung zur Verwendung von Selektoren in CSS

Das obige ist der detaillierte Inhalt vonEinfaches CSS3-Tutorial zum grafischen Zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!