unity让物体具有高光
A few months ago I created a CSS “diamond” mesh navigation; this time, I thought I’d do a hexagonal mesh with random highlights to spark viewer interest.
几个月前，我创建了CSS“钻石”网格导航 ； 这次，我想我会制作一个带有随机高光的六角形网格，以激发观众的兴趣。
While image outlines in squares, circles and even octagons are relatively easy to create in CSS, hexagons are a little more challenging, so I decided to use SVG and clip-path to achieve the effect.
虽然在CSS中相对容易创建正方形， 圆形甚至八边形的图像轮廓，但是六边形则更具挑战性，因此我决定使用SVG和剪切路径来实现效果。
标记 (The Markup)
The HTML is fairly straightforward: I’ll give just three examples of the image tiles, as there’s a lot of repetition:
HTML非常简单：由于重复很多，我仅给出三个图像切片示例：
<div id="honeycomb">
<a href="#" class="active">
<img src="ferns.jpg" srcset="ferns-2x.jpg 2x" alt="Ferns">
</a>
<a href="#">
<img src="canyon.jpg" srcset="canyon-2x.jpg 2x" alt="Canyon Wall">
</a>
<a href="#" class="active">
<img src="agave-cactus.jpg" srcset="agave-cactus-2x.jpg 2x" alt="Agave cactus">
</a>
…
</div>Links that are active (i.e. they would actually go somewhere when clicked) are given a class of the same name. srcset is used for optimised file size; alternatively, a large sprite map could be used, although the advantages of spriting will be less effective as HTTP2 is increasingly adopted over time.
激活的链接 (即，当单击链接时它们实际上会到达某处)被赋予相同名称的类。 srcset用于优化文件大小； 或者，可以使用大的sprite映射，尽管随着时间的推移越来越多地采用HTTP2，但是spriting的优点将不太有效。
To clip the images in non-Webkit-dervied browsers I’ll add SVG markup to the page. The clipPath is in a 1 × 1 box:
要在非Webkit派生的浏览器中剪辑图像，我将在页面中添加SVG标记。 clipPath位于1×1框中：
<svg id="clippy">
<defs>
<clipPath id="hexagon" clipPathUnits="objectBoundingBox">
<polygon points=".25,.934 0,.5 .25, .068 .75, .068 1, .5 .75, .934" />
</clipPath>
</defs>
</svg>To reference the SVG, and create the equivalent CSS, I’ll use clip-path in an embedded style sheet.
为了引用SVG并创建等效CSS，我将在嵌入式样式表中使用clip-path 。
I detailed how to convert between SVG clipPath and CSS clip-path in a previous article.
在上一篇文章中，我详细介绍了如何在SVG clipPath和CSS clip-path之间进行转换 。
CSS (The CSS)
The opening CSS includes basic styles for the <body> and the SVG (reduced in size so that it doesn’t take any actual space on the page: this does not affect its clipping ability) and sizing the container for the hexagons, while not allowing them to overflow:
开头CSS包括<body>和SVG的基本样式(已减小尺寸，因此它不会在页面上占用任何实际空间：这不会影响其剪切能力)，并为六边形确定容器的大小，而不会让他们溢出：
body {
margin: 0;
background: #000;
}
#clippy {
width: 0; height: 0;
}
#honeycomb {
position: relative;
padding-top: 50%;
overflow: hidden;
}The links are given absolute positioning inside the relative container (meaning that they will positioned relative to it, not the <body>. The CSS clip-path is provided with a vendor prefix; note that this is not extended to the transition, which will be used in a moment.
链接在relative容器内被absolute定位 (这意味着它们将相对于它而不是<body> 。CSS clip-path带有供应商前缀 ；请注意，这不会扩展到transition ，它将transition到待会儿使用。
#honeycomb a {
position: absolute;
width: 38%;
top: -4%;
left: 1%;
clip-path: url(#hexagon);
-webkit-clip-path: polygon(25% 93.4%, 0% 50%, 25% 6.8%, 75% 6.8%, 100% 50%, 75% 93.4%);
clip-path: polygon(25% 93.4%, 0% 50%, 25% 6.8%, 75% 6.8%, 100% 50%, 75% 93.4%);
opacity: .5;
transition: .5s opacity;
}
#honeycomb img {
width: 100%;
height: auto;
}The JavaScript randomize function will apply a current class to the link it highlights; visually, this will be the same as the mouse or touch hover on the same link, so the selectors are grouped:
JavaScript randomize函数会将current 类应用于其突出显示的链接； 在视觉上，这将与同一链接上的鼠标或触摸悬停相同，因此将选择器 分组 ：
#honeycomb a.active:hover, #honeycomb a.current {
opacity: 1;
}At the same time, we want links that do not lead anywhere to not have this hover effect, so the :not selector is used to ensure that links that do not have a class of .active don’t respond to interaction events:
同时，我们希望不会导致任何地方的链接不具有这种悬停效果，因此:not选择器用于确保不具有.active类的.active不会响应交互事件：
#honeycomb a:not(.active) {
pointer-events: none;
}JavaScript (The JavaScript)
If the user doesn’t take any action, I want the links to be randomly highlighted to lead them to some interaction:
如果用户不执行任何操作，我希望将链接随机突出显示，以使它们进行一些交互：
var active = document.getElementsByClassName("active");
function highlight() {
var randomhex = Math.floor(Math.random() * active.length);
active[randomhex].classList.add("current");
var fadeInterval = window.setTimeout(function() {
active[randomhex].classList.remove("current")
}, 2000);
}
var highlightInterval = window.setInterval(function() { highlight() }, 3000);active gathers the links that lead somewhere into a JavaScript array; the highlight function (called every three seconds) selects a random number between 0 and 2 (stored as randomhex), highlights the associated link from the active array, and then fades it out after two seconds.
active收集到JavaScript数组的链接; highlight函数(每三秒钟调用一次)选择一个介于0和2之间的随机数(存储为randomhex )，高亮显示active数组中的关联链接，然后在两秒钟后淡出它。
清理 (Cleanup)
The hexagon links need to be positioned, otherwise they will all appear exactly on top of each other. I did this using inline styles, judging the results by eye:
六角形链节需要放置，否则它们将完全彼此重叠。 我使用内联样式进行了此操作，通过肉眼判断结果：
<div id="honeycomb">
…
<a href="#" style="left: 60%; top: 66%;">
<img src="golden-forest.jpg" srcset="golden-forest-2x.jpg 2x" alt="Golden Forest">
</a>
<a href="#" style="top: -38.5%; left: 30.5%">
<img src="weeds.jpg" srcset="weeds-2x.jpg 2x" alt="Weeds">
</a>
…
</div>For greater accuracy and efficiency, you could formally calculate the position of the hexagons (perhaps expressing it with CSS calc or using a preprocessor), applying the results with small, shared classes.
为了获得更高的准确性和效率，您可以正式地计算六边形的位置(也许用CSS calc或使用预处理器将其表示)，然后将结果应用于较小的共享类。
One remaining problem is that the user could move over a link while the JavaScript continues to highlight other links. While there are a number of solutions to this issue, I opted for a simple CSS override:
剩下的一个问题是，当JavaScript继续突出显示其他链接时，用户可以在链接上移动。 尽管有许多解决此问题的方法，但我选择了一个简单CSS替代：
#honeycomb:hover a.current {
opacity: 0.5;
}Meaning: if the user’s cursor is active anywhere in the honeycomb element, set anything with a class of current back to its default opacity. The result is that - while the JavaScript will continue to run - the user won’t see any changes if their cursor is over one of the active links.
含义：如果用户的光标在honeycomb元素中的任何位置都处于活动状态，则将具有一类current任何内容设置为默认不透明度。 结果是-尽管JavaScript将继续运行-如果用户的光标位于活动链接之一上，则用户将看不到任何更改。
翻译自: https://thenewcode.com/21/Honeycomb-Navigation-with-Random-Highlights
unity让物体具有高光
1209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
