div 隐藏_CSS实现六边形Div图片展示效果
生活随笔
收集整理的這篇文章主要介紹了
div 隐藏_CSS实现六边形Div图片展示效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一. 效果圖
二. 六邊形效果涉及到的知識點
1.?transform:?rotate(120deg);?//?元素旋轉2.?overflow:?hidden;?//?超出隱藏
3.?visibility:?hidden;?//?占位隱藏
注：visibility: hidden; 與 display:none; 相似，但不同的是，它雖然隱藏了，但依然會在網頁中占有位置。
三. 原理講解
我們要用到 3 層 div 進行旋轉來得到這個效果(注: 3 層 div 的寬高是一樣的)。
最外層 div.boxF 旋轉 120 度，第二層 div.boxS 旋轉 -60 度，第三層 div.boxT 再旋轉 -60 度，到第三層時剛好回正，我們的圖片就放在第 3 層的 div 背景中。
基本結構如下：
<div?class="boxF">????<div?class="boxS">
?????????<div?class="boxT"?style="background-image:?url(img/1.jpg);">
??????????????//?some?else
?????????div>
????div>
div>
因為前兩層div中沒有東西，純粹就是用來旋轉得到6邊形的，所以對 1,2 層 div 設置 visibility: hidden 而第 3 層 div 是放圖片的，需要顯示出來，因此設置 visibility: visible。?需要注意的是：如果你不對第 3 層 div 設置 visibility: visible 那它默認就會繼承第二層 div.boxS 的 visibility: hidden 。經過旋轉肯定有超出的部分，因此對 3 個 div 都設置 overflow:hidden。
經過旋轉和對超出部分的隱藏我們就可以得到我們想要的 6 邊形了。還有一點需要注意，那就是 div 的寬高比例必須滿足 4:5 ，不然得到的就不是 6 邊形了。在上面的效果圖片中。我們在第三層 div.boxT 里面還放置了一個 div.overlay 這個 div 是用于遮罩的，當鼠標移到 6 邊形上時，會有遮罩效果。
四. 實例代碼
html><html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<title>CSS實現六邊形圖片展示效果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">
????????
????????<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>
????????
????????<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>
覺得本文對你有幫助，請分享給更多人：)
關注[ 前端小玖 ]加星標，點贊和在看就是最大的支持
總結
以上是生活随笔為你收集整理的div 隐藏_CSS实现六边形Div图片展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python语言术语_python的一些
- 下一篇： h5的横线_CSS文字两边添加横线的几种