Question

我遇到了一个效果，我正在尝试使用css / javascript进行复制，虽然我有点挣扎......

观看http://www.youtube.com/watch?v=sXqXpwyBI1k，在电影中，您会注意到当演示者按下任何按钮时，白框会缩放并淡入视图，然后快速淡出。

这是非常微妙但非常有效。

任何人都知道这种效果的名称，或者甚至有一些链接到某些复制它的代码？

回应@Fabrizio，这是我写的代码。如您所见，当我调用animate时，“shadow”按钮从0,0 width / height开始并扩展到目标width / height。

另一个奇怪的事情是，我不能在宽度/高度上使用+ =或 - =我认为它增加/减少了“当前”值，没有从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>

Answer 1

这是我能在几分钟内完成的事情。

您可以使用边框或颜色进行播放，请参阅jQuery animate文档以获取有关动画的更多信息（例如，除非使用插件，否则无法为边框颜色设置动画，也不会产生弹性效果

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

我实际上是要在我的网站上使用这个

点击边框淡入/缩放？

1 个答案: