CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS3 实现六边形Div图片展示效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:55 AM

效果图：

实现原理：

这个效果的主要css样式有：

1.>transform: rotate(120deg); 图片旋转

2.>overflow:hidden; 超出隐藏

3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。

最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible; （ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;

经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高不要相等，不然得到的就不是6边形了。

在上面的效果图片中。我在第三层(boxT)里面还放置了一个div(overlay)，这个div是用于遮罩的，当鼠标移到6边形上时，会有遮罩效果。在div(overlay)里面有个a标签，里面是个+号，点击a标签则弹出层，显示大图（ps:这个js效果暂时没写）

下面给出上面效果图的DEMO代码：

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

想看效果，直接将DEMO代码复制就行了。IE9以下版本不支持。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

HTML行動：網站結構的示例May 05, 2025 am 12:03 AM

HTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。

您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）

HTML的目的：啟用Web瀏覽器可以顯示內容May 03, 2025 am 12:03 AM

HTML的核心目的在於讓瀏覽器理解並展示網頁內容。 1.HTML通過標籤定義網頁結構和內容，如、到、等。 2.HTML5增強了多媒體支持，引入了和標籤。 3.HTML提供了表單元素，支持用戶交互。 4.優化HTML代碼可提升網頁性能，如減少HTTP請求和壓縮HTML。

為什麼HTML標籤對Web開發很重要？May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentastheyandendenhancewebpages.1）semantictagsimproveaccessibilityandseo.2）semanteLayOut，語義和互動性。 3）poseriblesibilityandseoandseo.3）poseriblesoftagscanoftagscanoftagscanoptagscanoptimizeperefeneandimizeanDenSuroceRecRoscRoss-BrowserCrowserCercerComercompatibility。

See all articles