css3の簡単なグラフィック描画チュートリアル-PHPチュートリアル-php.cn

css3の簡単なグラフィック描画チュートリアル

小云云

リリース： 2023-03-17 14:06:01

オリジナル

1726 人が閲覧しました

CSS は Cascading Style Sheets (英語の正式名: Cascading Style Sheets) で、HTML (Standard Universal Markup Language のアプリケーション) や XML (Standard Universal Markup Language のサブセット) などのファイルスタイルを表現するために使用されるコンピューター言語です。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。 CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォントサイズスタイルをサポートし、Web ページのオブジェクトとモデルスタイルを編集する機能を備えています。

ここでは、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>

ログイン後にコピー

効果は次のとおりです:

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>

ログイン後にコピー

効果は次のとおりです:

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>

ログイン後にコピー

効果は次のとおりです表示:

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>

ログイン後にコピー

効果は写真の通りです:

css3の簡単なグラフィック描画チュートリアル

ハートの形を描きます

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

ログイン後にコピー

効果は写真の通りです:

css3の簡単なグラフィック描画チュートリアル

矢印を描きます

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

ログイン後にコピー

効果は写真の通りです:

css3の簡単なグラフィック描画チュートリアル

五芒星を描きます

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

ログイン後にコピー

効果は写真の通りです:

css3の簡単なグラフィック描画チュートリアル

バブルボックス/プロンプトボックスを描きます

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

ログイン後にコピー

効果は次の通りです表示:

css3の簡単なグラフィック描画チュートリアル

バルーンを描画します

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

ログイン後にコピー

効果は次のようになります:

css3の簡単なグラフィック描画チュートリアル

陰陽八卦を描画します

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

ログイン後にコピー

効果は次のようになります:

css3の簡単なグラフィック描画チュートリアル

CSS は、次のスタイルの説明を提供します。 HTML マークアップ言語。その中の要素の表示方法を定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。上に描かれた小さなグラフィックを見てください。すごいと思いませんか?これらのチュートリアルは非常にシンプルで、初心者が学ぶのに適しています。