css如何設(shè)置圖片為六邊形-創(chuàng)新互聯(lián)
這篇“css如何設(shè)置圖片為六邊形”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要參考一下，對(duì)于“css如何設(shè)置圖片為六邊形”，小編整理了以下知識(shí)點(diǎn)，請(qǐng)大家跟著小編的步伐一步一步的慢慢理解，接下來(lái)就讓我們進(jìn)入主題吧。
css是什么意思
css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。
css設(shè)置圖片為六邊形的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中引入圖片；最后通過(guò)“transform: rotate(120deg);overflow: hidden;”等css樣式實(shí)現(xiàn)圖片為六邊形即可。
CSS3 實(shí)現(xiàn)六邊形Div圖片展示效果
一. 效果圖
二. 原理講解
這個(gè)效果用到的主要知識(shí)點(diǎn) ：
1. transform: rotate(120deg); 圖片旋轉(zhuǎn)
2. overflow: hidden; 超出隱藏
3. visibility: hidden; 也是隱藏，與 display:none; 相似，但不同的是，它雖然隱藏了，但依然會(huì)在網(wǎng)頁(yè)中占有位置
我們要用到3層p進(jìn)行旋轉(zhuǎn)來(lái)得到這個(gè)效果（注: 3層 p 的大小是一樣的）。最外層 p(boxF) 旋轉(zhuǎn)120度，第二層 (boxS) 旋轉(zhuǎn)-60度，第三層 (boxT) 再旋轉(zhuǎn)-60度，此時(shí)剛好回正。我們的圖片就放在第3層的 p 背景中。因?yàn)榍皟蓪?p 中沒(méi)有東西，純粹就是用來(lái)旋轉(zhuǎn)得到6邊形的，所以對(duì)1，2層 p 設(shè)置 visibility: hidden; 而第3層 p 是放圖片的，需要顯示出來(lái)，因此設(shè)置 visibility: visible; （注: 如果你不對(duì)第3層 p 設(shè)置 visibility: visible; 那它默認(rèn)就會(huì)繼承第二層 p(boxS) 的 visibility: hidden; ）。經(jīng)過(guò)旋轉(zhuǎn)肯定有超出的部分，因此對(duì)3個(gè)p都設(shè)置 overflow:hidden;
經(jīng)過(guò)旋轉(zhuǎn)和對(duì)超出部分的隱藏我們就可以得到我們想要的6邊形了。還有一點(diǎn)要注意，那就是p的寬高比例必須滿(mǎn)足4：5，不然得到的就不是6邊形了。在上面的效果圖片中。我們?cè)诘谌龑?(boxT) 里面還放置了一個(gè) p(overlay)，這個(gè) p 是用于遮罩的，當(dāng)鼠標(biāo)移到6邊形上時(shí)，會(huì)有遮罩效果。在 p(overlay) 里面有個(gè)a標(biāo)簽，里面是個(gè) + 號(hào)，點(diǎn)擊 a 標(biāo)簽則彈出層，顯示大圖（注: 這個(gè) js 效果暫時(shí)沒(méi)寫(xiě)）。
三. 上面效果圖的DEMO代碼
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 實(shí)現(xiàn)六邊形圖片展示效果</title>
<style type="text/css">
body, p, 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>
<p class="box">
<!--第一行(lineFirst)-->
<p class="lineF">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/1.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/2.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/3.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
<!--第二行(lineSecond)-->
<p class="lineS">
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/4.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
<p class="boxF">
<p class="boxS">
<p class="boxT" style="background-image: url(img/5.jpg);">
<p class="overlay">
<a href="#">+</a>
</p>
</p>
</p>
</p>
</p>
</p></body></html>-- 想看效果，直接將DEMO代碼復(fù)制就行了，當(dāng)然，圖片得你自己加了，IE9以下版本不支持。
以上是“css如何設(shè)置圖片為六邊形”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
本文標(biāo)題：css如何設(shè)置圖片為六邊形-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://www.muchs.cn/article26/dgcpcg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、外貿(mào)建站、虛擬主機(jī)、云服務(wù)器、小程序開(kāi)發(fā)、軟件開(kāi)發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- JavaScript數(shù)組遍歷-創(chuàng)新互聯(lián)
- 固態(tài)硬盤(pán)用mbr還是gpt固態(tài)硬盤(pán)分區(qū)表類(lèi)型選什么？-創(chuàng)新互聯(lián)
- 如何使用easyMock-創(chuàng)新互聯(lián)
- leetCode20.ValidParentheses字符串-創(chuàng)新互聯(lián)
- 機(jī)器學(xué)習(xí)中的交叉熵-創(chuàng)新互聯(lián)
- Javascript模塊化機(jī)制原理是什么-創(chuàng)新互聯(lián)
- 評(píng)分條RatingBar-創(chuàng)新互聯(lián)
- 如何在網(wǎng)頁(yè)設(shè)計(jì)中最大程度地利用面包屑導(dǎo)航？ 2015-10-25
- 面包屑導(dǎo)航有什么作用? 2014-01-20
- 好用不簡(jiǎn)單,成都網(wǎng)站建設(shè)中為你指路的面包屑導(dǎo)航 2016-11-11
- 網(wǎng)站建設(shè)中面包屑導(dǎo)航如何運(yùn)應(yīng)你都知道嗎？ 2016-10-22
- 網(wǎng)站SEO優(yōu)化之面包屑導(dǎo)航的簡(jiǎn)易設(shè)置步驟 2023-04-04
- 北京網(wǎng)站建設(shè)講解面包屑導(dǎo)航有什么作用？ 2021-05-21
- 網(wǎng)站優(yōu)化先行官：面包屑導(dǎo)航 2021-10-13
- 【網(wǎng)站建設(shè)】網(wǎng)站建設(shè)中面包屑導(dǎo)航的設(shè)計(jì)技巧有哪些? 2022-03-22
- 網(wǎng)站如何正確使用面包屑導(dǎo)航？ 2016-12-28
- 給你網(wǎng)站頁(yè)面設(shè)計(jì)的面包屑導(dǎo)航你真的會(huì)用么? 2022-08-25
- 網(wǎng)站建設(shè)中面包屑導(dǎo)航功能的重要性 2022-08-20
- 面包屑導(dǎo)航在網(wǎng)站優(yōu)化中有用嗎？ 2022-09-26