border fade/scale on click?

я сталкивался эффект я пытаюсь воспроизвести с помощью CSS/JavaScript, хотя я изо всех сил немного ...border fade/scale on click?

Часы http://www.youtube.com/watch?v=sXqXpwyBI1k и во время фильма, вы заметите, что, когда презентатор прессы любая из кнопок, белая коробка масштабируется и исчезает, а затем быстро исчезает.

Это очень тонкий, но очень эффективный.

Кто-нибудь знает имя этого типа эффекта или даже имеет ссылку на какой-то код, который его реплицирует?

В ответ на @Fabrizio это код, который я написал. Как вы можете видеть, когда я вызываю анимацию, кнопка «тень» начинается с 0,0 ширины/высоты и расширяется до целевой ширины/высоты.

Еще одна странная вещь: я не могу использовать + = или - = по ширине/высоте ... Я думал, что она увеличила/уменьшила «текущее» значение, а не сбросила с 0 и снова запустила ...

<!doctype html> 
<html lang="en"> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     $('.button').click(function() { 
      var shadow = $('<button class="button shadow">&nbsp;</button>'); 
      shadow.css({ 
      width : $(this).outerWidth() + 2, 
      height : $(this).outerHeight() + 2, 
      marginLeft : '-1px', 
      marginTop : '-1px', 
      opacity : 0 
      }); 

      $(this).before(shadow); 
      shadow.animate({ 
      opacity : 0.5, 
      marginLeft : '-=2', 
      marginTop : '-=2', 
      width : $(this).outerWidth() + 6, 
      height : $(this).outerHeight() + 6 
      }, 200); 
     }); 
     }); 
    </script> 
    <style> 
     * { margin: 0; padding: 0; } 
     body { padding: 50px; background: #333; } 
     .button { padding: 15px 25px; border: 0; cursor: pointer; font-weight: bold; } 
     .button.red { background: #FF0000; color: #FFFFFF; } 
     .button.shadow { background: transparent; display: block; position: absolute; border: solid 1px #FFFFFF; } 
    </style> 
    </head> 
    <body> 
    <button class="button red">Test</button> 
    </body> 
</html>

источник

2012-03-02 Gavin

вы смотрели в JQuery? вы можете создать DIV на лета, позицию абсолютной, дать координаты щелкнули объект, а затем использовать одушевленный, чтобы сделать он виден, а затем исчезает. Я никогда не делал этого, но я не предполагаю, что я невероятно тяжелый с помощью jQuery – Fabrizio

У меня, к сожалению, у моего ноутбука немного недомогание, и когда я вставал, чтобы что-то сделать, он отключился во время некоторых тестов. При использовании функции анимации для изменения ширины, высоты и поля вместо «масштабирования» он изменяет размер элемента «тень» от 0 до ширины/высоты, а не от приращения, как следует. Я отправлю образец. ;) – Gavin

Это то, что я смог зажать в течение нескольких минут.

Вы можете играть с границей или цветом, пожалуйста, обратитесь к документации JQuery анимировать для получения дополнительной информации о неживом (например, вы не можете анимировать цвет границы, если вы не используете плагин, и не имеет бодрый эффект

$('.style_logo_position_extra_logo').mouseover(function(){ 
    $('<div/>') 
     .width($(this).outerWidth()) 
     .height($(this).outerHeight()) 
     .offset($(this).offset()) 
     .css({ 
      'border-width':'2px', 
      'border-style':'double', 
      'border-color':$(this).css('border-color'), 
      'position':'absolute', 
      'borderTopLeftRadius': $(this).css('borderTopLeftRadius'), 
      'borderTopRightRadius': $(this).css('borderTopRightRadius'), 
      'borderBottomLeftRadius': $(this).css('borderBottomLeftRadius'), 
      'borderBottomRightRadius': $(this).css('borderBottomRightRadius'), 
      'WebkitBorderTopLeftRadius': $(this).css('WebkitBorderTopLeftRadius'), 
      'WebkitBorderTopRightRadius': $(this).css('WebkitBorderTopRightRadius'), 
      'WebkitBorderBottomLeftRadius': $(this).css('WebkitBorderBottomLeftRadius'), 
      'WebkitBorderBottomRightRadius': $(this).css('WebkitBorderBottomRightRadius'), 
      'MozBorderRadius': $(this).css('MozBorderRadius') 
     }) 
     .appendTo('body') 
     .animate({ 
       'border-width':'6px', 
       'opacity':0.25, 
       'width':'+=6', //use even numbers if possible 
       'height':'+=6', 
       'left':'-=8', //-((+width/2) + (delta border) +1) = -((+6/2) + (6-2)+1) =-8 
       'top':'-=8', 
       'borderTopLeftRadius': '+=6', 
       'borderTopRightRadius': '+=6', 
       'borderBottomLeftRadius': '+=6', 
       'borderBottomRightRadius': '+=6', 
       'WebkitBorderTopLeftRadius': '+=6', 
       'WebkitBorderTopRightRadius': '+=6', 
       'WebkitBorderBottomLeftRadius': '+=6', 
       'WebkitBorderBottomRightRadius': '+=6', 
       'MozBorderRadius': '+=6' 
       },500, 'linear',function(){ 
        $(this).remove(); 
       }) 
     ; 
})

Я на самом деле собираюсь использовать один на моем сайте

источник

2012-03-02 21:19:57 Fabrizio

Хорошо выглядит. Я просто играю с этим. Я надеюсь, что автор видео сможет поделиться своим секретом. Если да, я также опубликую его здесь. – Gavin

Я взял ответ Fabrizio, немного упростил его и сделал скрипку, чтобы поиграть с: http://jsfiddle.net/bengundersen/T7u54/ – bgun

border fade/scale on click?

ответ

Смежные вопросы