div 隐藏_CSS实现六边形Div图片展示效果

最新推荐文章于 2021-08-03 21:44:16 发布

weixin_39678304

最新推荐文章于 2021-08-03 21:44:16 发布

阅读量211

点赞数

文章标签： div 隐藏 div不占位置 div旋转45度 div显示图片 div里面怎么放图片 html中图片旋转

一. 效果图

二. 六边形效果涉及到的知识点

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>

觉得本文对你有帮助，请分享给更多人：)

关注[ 前端小玖 ]加星标，点赞和在看就是最大的支持

weixin_39678304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
div 隐藏_CSS实现六边形Div图片展示效果

一. 效果图二. 六边形效果涉及到的知识点1.transform:rotate(120deg);//元素旋转2.overflow:hidden;//超出隐藏3.visibility:hidden;//占位隐藏注：visibility: hidden; 与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置。三. 原理讲解我们要用到...
复制链接

扫一扫