设计稿
实现
根据设计稿可以发现&＃xff0c;整个组件的结构由一个等边六边形与一个矩形构成。构成的不规则图形在鼠标hover时出现外发光效果。 如果只是用一个等边六边形与一个矩形去实现&＃xff0c;那么在鼠标hover时的效果将如下图所示&＃xff1a;
正六边形的外发光效果进入了矩形内,与设计稿不符。所以我们需要一个遮罩去当着进入到矩形范围内到发光效果&＃xff0c;如下图所示&＃xff1a;
这又导致了我到等边六边形被矩形遮罩给挡住了&＃xff0c;所以我们需要新加一层正六边形遮罩叠加在矩形遮罩之上。最终的结构如下&＃xff1a;
最下方为整个组件的容器&＃xff0c;并且负责hover时的外发光效果&＃xff1b;第二层为正六边形图形&＃xff0c;负责外发光的显示。第三层为矩形的遮罩&＃xff0c;负责遮挡住正六边形的外发光效果&＃xff1b;第四层就是设计稿中所看到的正六边形。
六边形的实现
组件的整体框架结构已经有了&＃xff0c;那么就剩下了正六边形如果绘制的问题。我们知道&＃xff0c;html并没有为我们提供绘制多边形标签&＃xff0c;所以我们需要开动小脑筋通过各种奇技淫巧来实现。 好在css3的产生&＃xff0c;我们可以通过对矩形的旋转来实现等边六边形的绘制&＃xff0c;如下图所示&＃xff1a;
我们通过对3个矩形的不同角度旋转就可以实现&＃xff1a;
- 第一个矩形旋转0度
- 第二个矩形旋转60度
- 第三个矩形旋转-60度
效果如下&＃xff1a;
问题又来了&＃xff0c;对矩形旋转后的结果并没有形成一个等边六边形&＃xff0c;而是一个诡异的图形&＃xff0c;原因是矩形的长宽比例。所以我们需要对矩形对长宽进行计算。如下图&＃xff1a;
一个等边六边形是由六个等边三角形组成。等边三角形每个角为60°。根据三角函数可以得到等边三角的高为sin60°L。那么组成等边六边形的矩形的高度为2sin60°L&＃xff0c;即√3L≈ 1.732 * L。
以矩形宽度为60px为例&＃xff0c;那么它的高度就 1.732*60 &＃61; 103.92。 得到如下代码&＃xff1a;
html
css
// 正六边形容器.panel__hexagon {width: 60px;height: 104px;position: relative;}// 正六边形 旋转的矩形.panel__hexagon-item {width: 100%;height: 100%;background: blue;position: absolute;top: 0;left: 0;}// 第一个旋转的矩形.panel__hexagon-right {transform: rotate(60deg);}// 第二个旋转的矩形.panel__hexagon-left {transform: rotate(-60deg);}
最终代码
html
css
// 容器.panel {position: relative;width: 300px;height: 300px;margin: 0 100px;}// 遮罩.panel__mark {width: 300px;height: 300px;background: #fff;position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: 1;transition: box-shadow .6s;}// 正六边形容器.panel__hexagon {width: 60px;height: 104px;position: absolute;left: 50%;transform: translateX(-50%);top: -30px;z-index: 2;}// 正六边形 旋转的矩形.panel__hexagon-item {width: 100%;height: 100%;background: blue;position: absolute;top: 0;left: 0;}// 第一个旋转的矩形.panel__hexagon-right {transform: rotate(60deg);}// 第二个旋转的矩形.panel__hexagon-left {transform: rotate(-60deg);}// 正六边形 外发光容器.panel__hexagon--shadow {z-index: 0;}// 正六边形 外发光 旋转的矩形.panel__hexagon--shadow .panel__hexagon-item {background: transparent;transition: box-shadow .3s;}// hover 效果.panel:hover .panel__mark,.panel:hover .panel__hexagon--shadow .panel__hexagon-item {box-shadow: 0 0 15px rgba(0, 0, 0, .61)}
最终效果
京公网安备 11010802041100号