图片以六边形显示 - 学习笔记
2018-06-24 01:24:14来源:未知 阅读 ()
六边形
今天看到别人分享的六边形学习 自己也试着做了一下
原理:
- 图片旋转 transfrom:rotate(120deg);
- 溢出隐藏 overflow:hidden;
我们要用三层div来实现旋转效果
第一次 rotate(120deg) 第二次 rotate(-60deg) 第三次 rotate(-60deg)
此时 正好div归正 我们的图片放在第三层里面 第一层和第二层纯属是为了实现六边形的
图像剪切成六边形定有溢出的地方设置溢出隐藏 overflow:hidden
div的宽度必须满足4:5 不然得到的就不是六边形了
HTML 部分
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>六边形图片展示</title> 6 <link href="css/index.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <!-- section 部分 container 容器 --> 10 <section class="container"> 11 <div class="conbox-1"> 12 <div class="conbox-2"> 13 <div class="conbox-3"> 14 <img src="images/a1.jpg"> 15 <div>风景</div> 16 </div> 17 </div> 18 </div> 19 20 <div class="conbox-1"> 21 <div class="conbox-2"> 22 <div class="conbox-3"> 23 <img src="images/a2.jpg"> 24 <div>风景</div> 25 </div> 26 </div> 27 </div> 28 29 <div class="conbox-1"> 30 <div class="conbox-2"> 31 <div class="conbox-3"> 32 <img src="images/a3.jpg"> 33 <div>风景</div> 34 </div> 35 </div> 36 </div> 37 38 <div class="conbox-1 margin-top margin-left"> 39 <div class="conbox-2"> 40 <div class="conbox-3"> 41 <img src="images/a4.jpg"> 42 <div>风景</div> 43 </div> 44 </div> 45 </div> 46 47 <div class="conbox-1 margin-top"> 48 <div class="conbox-2"> 49 <div class="conbox-3"> 50 <img src="images/a5.jpg"> 51 <div>风景</div> 52 </div> 53 </div> 54 </div> 55 56 </section> 57 </body> 58 </html>
CSS 部分
@charset "utf-8";
* {
margin:0; /* 外边距 */
padding:0; /* 内边距 */
}
body {
background-color:#0F9; /* 背景颜色 */
}
.container {
width:650px; /* 宽 */
height:430px; /* 高 */
margin:100px auto; /* 上外边距和下外边距100 左右边距自动 */
}
.conbox-1 {
width:200px;
height:250px;
float:left; /* 左浮动 */
margin-left:10px; /* 左边距10 */
overflow:hidden; /* 溢出隐藏 */
transform:rotate(120deg);
/* 改变外形 旋转120deg */
}
.conbox-2 {
width:100%;
height:100%;
overflow:hidden;
transform:rotate(-60deg);
}
.conbox-3 {
width: 100%;
height: 100%;
overflow: hidden;
transform:rotate(-60deg);
position: relative; /* 位置 : 相对的 */
}
.conbox-3 > div { /* >div 表示 div是.conbox-3的直接子选择器 */
width:100%;
height:100%;
position:absolute; /* 位置 : 绝对的 */
top:0;
left:0;
opacity:0; /* opacity 不透明的 */
line-height:250px; /* 线高度 */
text-align:center; /* 文本居中 */
color:#0FF;
cursor:pointer; /* 光标 : 指针 */
background:url(../images/s.png);
/* 背景图片 */
transition:opacity 0.3s;
/* 过渡 : 不透明度时间0.3s */
}
.conbox-3:hover > div {
/* 当光标移入 不透明度改变为1 */
opacity:1;
}
.margin-top {
margin-top:-70px;
}
.margin-left {
margin-left:115px;
}
.clear{
clear: both;
}
此文到此结束
此文参考链接 http://doc.okbase.net/similar/archive/109640.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:CSS应用的小问题总结
下一篇:关于前端规范
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- title 换行显示 2020-05-14
- CSS背景图片的6个有趣的技巧 2020-05-12
- 安装了https ssl证书,但浏览器显示并非完全安全(此页面内 2020-05-12
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash