unity让物体具有高光_具有随机高光的蜂窝导航

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让物体具有高光