コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

CSS3 の新機能と一般的なグラフィックを描画する方法の紹介

高洛峰
リリース： 2017-03-20 16:33:11
オリジナル
1446 人が閲覧しました

前書き: 最近、自分の Web ページを作成する予定です。デザイン草案では、ナビゲーション は長方形になる予定で、ホバー スタイルで表示される長方形やアバターなどもあります。円を描くことに加えて、私はこれまで真剣に他の図形を描いたことはありませんでした。今日はよく目にするいくつかの図形を描きます。

その前に、擬似要素とは何かを理解する必要があります (擬似要素とは異なり、擬似クラスと呼ばれる別の概念があります。この 2 つは混同されやすいです)。これがなければグラフィックスを描画できません。

a) 擬似要素: コンテンツ要素の前後に追加の要素を挿入するために使用されます。擬似要素と呼ばれる理由は、それらがドキュメント内でまったく生成されず、たとえば、F12 キーを押した場合にのみ表示されるためです。 、右側のコードボックスに表示されますか？

ここで使用する 2 つの疑似要素 ①要素の前:before ②要素の後:after

1) 丸、不要、三角形を見ましょう

/* 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>
ログイン後にコピー

2) Cylinder

/* 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>
ログイン後にコピー

3 ) 五芒星

五芒星を描くには、まず、ブラウザのいくつかのプライベート接頭辞が続くスタイルの「deg」が回転角度を表すことを知る必要があります。たとえば、「45deg」は 45 度を表します。時計回りに度回転、マイナスは反時計回りを意味します。

rotateはtransformの属性の1つで、2D回転、つまり2次元回転を表します。transformには他にもいくつかの機能があります。 、特殊効果を作成できます。スタイルはかなり高度です

/* 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>
ログイン後にコピー

五芒星を描くときは、必ず

content:"";を設定してください。そうしないと、疑似で表示されるスタイルが表示されません。 -class 要素; 両方の疑似クラス要素は絶対配置に設定するには、親要素を相対配置に設定する必要があります

4) チャットボックス

<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>
ログイン後にコピー

5) 八卦図は実際には大きな半円です + 2 つの小さな円

/* 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>
ログイン後にコピー

6)" "Masonry" グラフィック

まず直角台形を描き、次に疑似クラス要素を通してその下に三角形を描きます

/* 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>
ログイン後にコピー
CSS3 には多くのグラフィック メソッドがあります。あまり使わないのでゆっくり勉強する必要がありますが、退屈しているときに描くととても楽しいです


。

以上がCSS3 の新機能と一般的なグラフィックを描画する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3
ソース：php.cn
前の記事：CSS 親タグ内の子タグのデフォルト位置の詳細な紹介 次の記事：CSSを使った三角形の描き方を紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート