在网站上真的很酷的JavaScript或CSS功能

Question

有谁知道这个网站的眼球是如何设计的？这是javascript(也许是jQuery),还是简单的HTML5和CSS？我真的不明白你是如何在这个形状中得到一个小图像,得到它的onhover方法,设置一个新的图片,然后让它可点击.这是一个按钮吗？

http://animalvfx.com/work/

Answer 1

他们使用一个图像作为背景(在这里找到:http://animalvfx.com/images/bg-open-close.png).

它们只使用CSS,它们在类上有悬停状态,将背景位置设置为负偏移.

基本上风格是:

.slide-holder .opener {
   width: 30px;
   height: 38px;
   overflow: hidden;
   position: absolute;
   bottom: -38px;
   background: url(../images/bg-open-close.png) no-repeat;
}

.opener:hover {
   background-position: 0 -76px;
}

实际上,您一次只能看到背景图像的一部分.因为图像状态相似,所以它似乎在向上看.

眼睛的点击事件是使用jQuery slidedown

如果您想了解自己的工作方式,可以在大多数流行的Web浏览器中使用开发者控制台.然后使用HTML检查器工具检查您感兴趣的元素.通常按F12激活开发人员控制台.这适用于任何体面的现代Web浏览器(以及带Firebug的Firefox)