3

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

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

动画按钮

（白色对角线在按钮上从左到右不断移动）

我可以看到它是 CSS，但我尝试过四处搜索，但没有发现任何与这种样式真正相似的东西。

4

4 回答 4

5

the website is using javascript for the animation

How its done

We can break this up:

  • The button is given a background-image which in this case is a slight diagonal gradient.
  • Using javascript, the position of the given background-image is dynamically changed using event based style changes, in other words an animation.

Let's do it from scratch

Method 1 (This was the initial demo, since firefox does not support background-position-x/y it will not work, see Methods 2, 3 & 4 for that)
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)

Method 2 (creating a custom animation with 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
  );

An additional two methods have been added

The following methods are PURE CSS methods, there is 0kb of javascript code. That being said this method as of today 4th July 2013 is not 100% supported by all of the frequently used browsers. However if you are seeing this post maybe a decade later I would expect that CSS3 would have been properly implemented, and using it for the animation would be the way to go.

Method 3 (Using CSS to produce the background-position animation)

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

CSS

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

  }
}

And then add animation:glide 1200ms infinite; to the property declaration of button

Method 4 (javascript feels left out, let us send HTTP to spend sometime with javascript. We'll create the gradient with 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;

  }
}
于 2013-07-03T19:56:56.853 回答
0

这不是纯 CSS 动画，只是使用此 png 的背景位置动画： 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）。

于 2013-07-03T20:04:31.370 回答
0

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

于 2013-07-03T20:05:01.857 回答
0

设计师使用图像来显示按钮上看起来像是闪光的东西。

然后他们很可能使用一些 javascript 来无限地动画图像的移动

于 2013-07-03T21:15:02.497 回答