我正在尝试理解一个动画是如何在我链接的网站上完成的，是css3还是jquery？

Question

http://alpha.patterntap.com/

如果你将鼠标悬停在图像上，注意到向内动画的漂亮边框，这是在css3中使用嵌入阴影完成的吗？还是说这是jquery的事情？

Answer 1

这是工作中的CSS3，特别是-webkit-transition，你可以在这里看到它：

.list .item .shad {
   position:relative;
   top:-1px;
   margin:1px 0 -1px;
   border:1px solid #000;
   opacity:0.25;
   -moz-opacity:0.25;
   filter:alpha(opacity=25);
   -webkit-transition:all 0.1s linear; /* here! */
}

它将动画化为以下属性值：

.list .item:hover .shad{
  top:-10px;
  margin:10px 0 -10px;
  background:rgba(0,0,0,0.5);
  border:11px solid #050505;
  opacity:0.85;
  -moz-opacity:0.85;
  filter:alpha(opacity=85);
}

Answer 2

看起来像是JS。我找不到任何CSS过渡或动画之类的东西。它看起来也非常类似于这个效果：

http://css-tricks.com/inset-border-effect/