css 超链接_超容易CSS虹膜擦拭-CSDN博客

css 超链接

I believe that one of the hallmarks of excellence is not simply working efficiently or striving to learn, but questioning what has been done before.

我相信，卓越的标志之一不仅是有效地工作或努力学习，而且还要质疑以前做过的事情。

In that spirit, I was troubled by the code I demonstrated in yesterday’s article on iris wipe effects: the CSS worked, but it seemed overly complex, and I felt sure that there was a way to make it more efficient.

本着这种精神，我为昨天在虹膜擦除效果文章中演示的代码感到困扰：CSS可以正常工作，但它似乎过于复杂，而且我确信有办法提高效率。

After a restless night, I realized I had been guilty of overthinking things: there is indeed a better way to accomplish the same result, within a limited solution space. That’s not to say that the previous technique is wrong - it’s still the only way I can think to achieve the composite image featuring Marvin the Martian, for example. But this new technique works much better for the general goal of an iris reveal of an image in a round button... and it has the benefit of being much faster to write.

经过一个不安定的夜晚，我意识到自己对自己的想法太过内:：在有限的解决方案空间内，确实存在更好的方法来实现相同的结果。这并不是说先前的技术是错误的-例如，这仍然是我想到的以Marvin the Martian为特色的合成图像的唯一途径。但是，这种新技术可以更好地实现虹膜在圆形按钮中显示图像的总体目标……而且它的优点是写入速度更快。

The code is extremely simple: just a single link, or a button, with no other markup needed. The CSS is only a few lines:

代码非常简单：只需一个链接或一个按钮，而无需其他标记。 CSS只有几行：

a {
	width: 150px;
	height: 150px;
	display: block;
	border-radius: 50%;
	box-sizing: border-box;
	transition: .3s all ease-in;
	text-decoration: none;
	background: url(alicia-demerson.jpg);
	background-position: center;
	background-size: 150px 150px;
	border: 75px solid rgba(0,0,0,1);
}
a:hover {
	border: 0px solid rgba(0,0,0,1);
}

The technique relies on the box-sizing property. Under normal circumstances, the thickness of a CSS border is added to the outside of the element it is applied to, making it larger. But with box-sizing set to border-box, the border is set inside the element. Specifying the border to be whatever color we wish and half the width of the button works to cover content inside the link. By setting the border to 0 on :hover and transitioning between the two states, the image underneath is revealed. In theory, you could also use an inset box-shadow, as I did in the recent CSS Polaroid image processing example.

该技术依赖于box-sizing属性。通常情况下，CSS border的粗细会添加到要应用的元素的外部，从而使其更大。但是将box-sizing设置为border-box ，将在元素内部设置边框。将边框指定为我们希望的任何颜色，然后将按钮的一半width覆盖链接内的内容。通过在:hover上将border设置为0并在两种状态之间转换，可以显示下面的图像。从理论上讲，您也可以使用插入box-shadow ，就像我在最近的CSS Polaroid图像处理示例中所做的那样。

A couple of neat additional features: if background-size is set to cover or contain, the image effectively “pops out” from the centre of the button, as shown in the example above. And, of course, you can nest as many transitions inside the button as you wish. I’ve provided a few possibilities above; the code to achieve each iris effect is hosted at CodePen for you to play with as you wish.

几个简洁的附加功能：如果将background-size设置为cover或contain ，则图像实际上从按钮的中心“弹出”，如上例所示。而且，当然，您可以根据需要在按钮内嵌套尽可能多的过渡。我在上面提供了一些可能性；实现每个虹膜效果的代码托管在CodePen中，供您随意使用。

Another distinction between this technique and the previous example is that due to the way in which the border is resized all of these iris effects are “in to out” or “grow“ motions, whereas the other approach can produce both this and “out to in” effects.

此技术与上一个示例之间的另一个区别是，由于调整边框大小的方式，所有这些虹膜效果都是“从内到外”或“增长”运动，而另一种方法既可以产生这种效果，也可以产生“向外产生”效果。 in”效果。

One browser bug to be aware of: Firefox will currently move any text inside the link when the border is resized, even if it is positioned absolute. (You’ll see an example in the third button, left deliberately for that reason). To be compatible across all browsers, text needs to be outside the link if you wish it to remain unaffected by the transition on the border.

要注意的一个浏览器错误：调整边框大小时，Firefox当前将在链接内移动任何文本，即使其位置为absolute 。 (由于这个原因，您将在第三个按钮中看到一个示例，故意将其保留)。为了与所有浏览器兼容，如果希望文本不受边框过渡的影响，则文本必须位于链接之外。