css如何设置图片为六边形
这篇“css如何设置图片为六边形”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“css如何设置图片为六边形”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。
创新互联坚信:善待客户,将会成为终身客户。我们能坚持多年,是因为我们一直可值得信赖。我们从不忽悠初访客户,我们用心做好本职工作,不忘初心,方得始终。十余年网站建设经验创新互联是成都老牌网站营销服务商,为您提供网站设计、网站制作、网站设计、H5技术、网站制作、高端网站设计、微信小程序开发服务,给众多知名企业提供过好品质的建站服务。
css是什么意思
css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言,并且css样式可以直接存储于HTML网页或者单独的样式单文件中,而样式规则的优先级由css根据这个层次结构决定,从而实现级联效果,发展至今,css不仅能装饰网页,也可以配合各种脚本对于网页进行格式化。
css设置图片为六边形的方法:首先创建一个HTML示例文件;然后在body中引入图片;最后通过“transform: rotate(120deg);overflow: hidden;”等css样式实现图片为六边形即可。
CSS3 实现六边形Div图片展示效果
一. 效果图
二. 原理讲解
这个效果用到的主要知识点 :
1. transform: rotate(120deg); 图片旋转
2. overflow: hidden; 超出隐藏
3. visibility: hidden; 也是隐藏,与 display:none; 相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置
我们要用到3层p进行旋转来得到这个效果(注: 3层 p 的大小是一样的)。最外层 p(boxF) 旋转120度,第二层 (boxS) 旋转-60度,第三层 (boxT) 再旋转-60度,此时刚好回正。我们的图片就放在第3层的 p 背景中。因为前两层 p 中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层 p 设置 visibility: hidden; 而第3层 p 是放图片的,需要显示出来,因此设置 visibility: visible; (注: 如果你不对第3层 p 设置 visibility: visible; 那它默认就会继承第二层 p(boxS) 的 visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个p都设置 overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是p的宽高比例必须满足4:5,不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 p(overlay),这个 p 是用于遮罩的,当鼠标移到6边形上时,会有遮罩效果。在 p(overlay) 里面有个a标签,里面是个 + 号,点击 a 标签则弹出层,显示大图(注: 这个 js 效果暂时没写)。
三. 上面效果图的DEMO代码
CSS3 实现六边形图片展示效果
-- 想看效果,直接将DEMO代码复制就行了,当然,图片得你自己加了,IE9以下版本不支持。
以上是“css如何设置图片为六边形”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
文章名称:css如何设置图片为六边形
本文来源:http://myzitong.com/article/gjoojj.html