Question

有没有人知道如何创建类似于此页面上显示的CSS按钮：

http://www.pennystocks.com/lp/?r=invstpd

animated button

（白色斜条不断地从按钮向左移动）

我可以看到它的CSS，但我已经尝试过搜索，但没有发现任何与此类风格非常相似的内容。

Answer 1

网站正在使用javascript作为动画

如何完成

我们可以解决这个问题：

按钮被赋予background-image，在这种情况下是一个轻微的对角线渐变。
使用javascript，使用基于事件的样式更改（即动画）动态更改给定background-image的位置。

让我们从头开始

方法1 （这是最初的演示，因为firefox不支持background-position-x / y它不起作用，请参阅方法2,3和4）
http://codepen.io/rajnathani/pen/qKjpL

CSS

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position-x:-65px;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);
  background-image:url('http://www.pennystocks.com/lp/img/subscribe-light.png')     
}

JS

setInterval(function(){
$('button').animate(
  {'background-position-x':'300px'},
  2000,
  function(){
    $('button').css('background-position-x','-65px')

  })}, 1800)

方法2 （使用setInterval创建自定义动画）

http://codepen.io/rajnathani/pen/DyCIv

CSS

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position:-75% 0;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);
  background-image:url('http://www.pennystocks.com/lp/img/subscribe-light.png')

}

JS

setInterval(function(){
  var cur_x = parseInt($('button').css('background-position').match(/^([0-9\-]+)/)[0]);
      if (cur_x <= 300){
        $("button").css('background-position', cur_x + 1 + "% 0")

      } else {
          $('button').css('background-position',"-75% 0")  
      }

    }, 1
  );

增加了另外两种方法

以下方法是PURE CSS方法，有0kb的javascript代码。可以说，所有常用浏览器都不支持2013年7月4日今天的这种方法。然而，如果你看到这篇文章可能十年之后我会期望CSS3能够正确实现，并且将它用于动画将是最佳选择。

方法3 （使用CSS生成background-position动画）

http://codepen.io/rajnathani/pen/Cugol

CSS

@keyframes glide {
  from {
      background-position:-75% 0;
  } to {
    background-position:300% 0;

  }
}

然后将animation:glide 1200ms infinite;添加到button

的属性声明中

方法4 （javascript感觉遗漏了，让我们发送HTTP以花一些时间使用javascript。我们将使用css创建渐变）

http://codepen.io/rajnathani/pen/FvfHk

button{
    margin:10px;
    padding:15px;
    font-family:verdana;
    font-weight:bold;
    color:whitesmoke;
    text-shadow:1px 1px 1px grey;
    font-size:25px;
    background-repeat:no-repeat;
  background-position:-115% 0;

     border:2px solid skyblue;
      background-color:rgb(0,129,182);

    background-color:rgb(0,129,182);
    background-image:-webkit-linear-gradient(
    -45deg, rgb(0,129,182),
    rgb(0,129,182) 30%,
    rgb(37,179,239) 50%, rgb(0,129,182) 70%, rgb(0,129,182) 100% 
    );
  background-image:linear-gradient(
    -45deg, rgb(0,129,182),
    rgb(0,129,182) 30%,
    rgb(37,179,239) 50%, rgb(0,129,182) 70%, rgb(0,129,182) 100% 
    );
  background-repeat:no-repeat;
  background-size:135px 55px;

    -webkit-animation:glide 1050ms infinite;
  animation:glide 1050ms infinite;
}

@-webkit-keyframes glide {
  from {
      background-position:-115% 0;
  } to {
    background-position:225% 0;

  } 
}

@keyframes glide {
  from {
      background-position:-115% 0;
  } to {
    background-position:225% 0;

  }
}

Answer 2

使用此png，这不是纯粹的css动画背景位置动画： http://www.pennystocks.com/lp/img/subscribe-light.png

<div id="subscribelight" class="subscribe-light" style="background-position: 204px 0px;">
  <div class="subscribe-fade">
   <div class="subscribe-text" onclick="$(this).submit();">
   </div>
  </div>
</div>

你可以用CSS3做到这一点 http://css-tricks.com/snippets/css/keyframe-animation-syntax/ 或使用jQuery。

我建议您使用Firebug或Chrome Inspector（或Safari Inspector）。

Answer 3

它只使用此图像，将其设置为div的背景，然后配置它的背景位置的x轴。简单：）

Answer 4

设计师使用图像显示按钮上闪烁的光线。

然后，他们最有可能使用一些javascript来无限制动动画像的移动

如何创建一个CSS动画背景的按钮？

4 个答案:

如何完成

让我们从头开始

增加了另外两种方法