CSS3で六角形のDiv画像表示を実装しましたeffect_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3で六角形のDiv画像表示を実装しましたeffect_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

レンダリング:

実装原理:

この効果の主な CSS スタイルは次のとおりです:

1.>transform:rotate(120deg); 画像の回転

2.>overフロー:非表示;非表示を超えて

3.>visibility: hidden; も、display:none; と似ていますが、違いは、非表示であっても、Web ページ内の位置を占めることです

3 レイヤーこの効果を得るために div が回転されます (追記: 3 レイヤーの div のサイズは同じです)。

一番外側の div (boxF) が 120 度回転されます。 2 番目のレイヤー (boxS) は -60 度回転され、3 番目のレイヤー (boxT) は再び -60 度回転され、通常の状態に戻ります。画像は 3 番目のレイヤーの div 背景に配置されます。 div の最初の 2 つのレイヤーには何もないため、純粋に六角形を取得するために回転するために使用されるため、可視性を設定します。1 番目と 2 番目のレイヤーの div は非表示に、3 番目のレイヤーの div は写真用です。を表示する必要があるため、visibility:visible; を設定します (追記: 3 番目のレイヤー div で Visibility:visible; を設定しない場合、デフォルトで 2 番目のレイヤー div (boxS) の Visibility:hidden; が継承されます)。回転後は必ず余分な部分があるので、3 つの div 全てに overflow:hidden;

を設定します。

回転して余分な部分を非表示にすると、目的の六角形が得られます。もう 1 つ注意すべき点は、div の幅と高さが等しくないことです。等しくない場合、結果は六角形になりません。上の効果画像の

。また、3 番目のレイヤー (boxT) に div (オーバーレイ) を配置しました。この div は、6 辺の形状の上にマウスを移動すると、マスキング効果が生じます。 div (オーバーレイ) 内に + 記号が付いた a タグがあります。 a タグをクリックするとレイヤーがポップアップし、大きな画像が表示されます (追記: この JS エフェクトはまだ書かれていません)

デモコード上記のレンダリングの例を以下に示します。

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>CSS3 实现六边形图片展示效果</title>    <style type="text/css">        body, div, img, ul, li        {            margin: 0;            padding: 0;        }        body        {            font-size: 12px;            background-color: #DDD;            min-width: 1200px;        }        ul, ul li        {            list-style: none;        }        .clear        {            clear: both;        }               .box        {            position: relative;            width: 630px;            margin: 100px auto;        }        .lineF, .lineS        {            position: absolute;            visibility: hidden;        }        .lineS        {            top: 182px;            left: 105px;        }        .boxF, .boxS, .boxT, .overlay        {            width: 200px;            height: 250px;            overflow: hidden;        }        .boxF, .boxS        {            visibility: hidden;        }        .boxF        {            transform: rotate(120deg);            float: left;            margin-left: 10px;            -ms-transform: rotate(120deg);            -moz-transform: rotate(120deg);            -webkit-transform: rotate(120deg);        }        .boxS        {            transform: rotate(-60deg);            -ms-transform: rotate(-60deg);            -moz-transform: rotate(-60deg);            -webkit-transform: rotate(-60deg);        }        .boxT        {            transform: rotate(-60deg);            background: no-repeat 50% center;            background-size: 125% auto;            -ms-transform: rotate(-60deg);            -moz-transform: rotate(-60deg);            -webkit-transform: rotate(-60deg);            visibility: visible;        }        .overlay        {            transition: all 250ms ease-in-out 0s;            display: none;            position: relative;        }        .overlay:hover        {            background-color: rgba(0,0,0,0.6);        }        .boxT:hover .overlay        {            display: block;        }        .overlay a        {            display: inline-block;            position: absolute;            left: 50%;            top: 50%;            margin: -16px 0 0 -16px;            border-radius: 3px;            background-color: #d3b850;            text-align: center;            line-height: 32px;            width: 32px;            height: 32px;            text-decoration: none;            color: White;            font-size: 18px;            font-weight: bolder;        }    </style></head><body>    <div class="box">        <!--第一行(lineFirst)-->        <div class="lineF">            <div class="boxF">                <div class="boxS">                    <div class="boxT" style="background-image: url(img/1.jpg);">                        <div class="overlay">                            <a href="#">+</a>                        </div>                    </div>                </div>            </div>            <div class="boxF">                <div class="boxS">                    <div class="boxT" style="background-image: url(img/2.jpg);">                        <div class="overlay">                            <a href="#">+</a>                        </div>                    </div>                </div>            </div>            <div class="boxF">                <div class="boxS">                    <div class="boxT" style="background-image: url(img/3.jpg);">                        <div class="overlay">                            <a href="#">+</a>                        </div>                    </div>                </div>            </div>        </div>        <!--第二行(lineSecond)-->        <div class="lineS">            <div class="boxF">                <div class="boxS">                    <div class="boxT" style="background-image: url(img/4.jpg);">                        <div class="overlay">                            <a href="#">+</a>                        </div>                    </div>                </div>            </div>            <div class="boxF">                <div class="boxS">                    <div class="boxT" style="background-image: url(img/5.jpg);">                        <div class="overlay">                            <a href="#">+</a>                        </div>                    </div>                </div>            </div>        </div>    </div></body></html>

ログイン後にコピー

効果を確認したい場合は、デモコードを直接コピーしてください。 IE9 より前のバージョンはサポートされていません。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。