开发者

i'm trying to understand how an animation was done on a website i have linked, css3 or jquery?

http://al开发者_Python百科pha.patterntap.com/

if you hover over the images, notice the nice border that animates inward, is that done with an inset shadow in css3? or is that a jquery thing?


It's CSS3 at work, -webkit-transition specifically, you can see it here:

.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! */
}

It's animating to these property values:

.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);
}


It looks like it's JS. I couldn't find any CSS transitions or animations or whatnot. It also looks pretty similar to this effect:

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜