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

Question

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

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

(白色斜条不断地从按钮向左移动到左侧)

我可以看到它的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日是不是100%由所有常用浏览器的支持.然而,如果你看到这篇文章可能十年之后我会期望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;

  }
}