я пытаюсь понять, как анимация была сделана на сайте, на который я ссылался, css3 или jquery? - PullRequest
Новая
       2

я пытаюсь понять, как анимация была сделана на сайте, на который я ссылался, css3 или jquery?

0 голосов
/ 19 декабря 2010

http://alpha.patterntap.com/

если вы наводите курсор на изображения, обратите внимание на красивую границу, которая анимирует внутреннюю часть, это сделано с помощью вставленной тени в css3?или это вещь jquery?

Ответы [ 2 ]

3 голосов
/ 19 декабря 2010

Это 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);
}
0 голосов
/ 19 декабря 2010

Похоже, это JS. Я не мог найти какие-либо переходы CSS или анимации или еще много чего. Это также выглядит очень похоже на этот эффект:

http://css -tricks.com / вставка-граница-эффект /

...