3

このページに表示されているような CSS ボタンを作成する方法を知っている人はいますか?

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

アニメーション ボタン

(白い斜めのバーは、ボタンを横切って常に左から右に移動します)

CSS であることがわかりますが、検索してみましたが、このタイプのスタイルに本当に似たものは見つかりませんでした。

4

4 に答える 4

5

ウェブサイトはアニメーションに 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
  );

さらに2つのメソッドが追加されました

以下のメソッドは PURE CSS メソッドであり、0kb の JavaScript コードがあります。2013 年 7 月 4 日現在、この方法は、頻繁に使用されるすべてのブラウザーで 100% サポートされているわけではありません。しかし、この投稿を 10 年後に見ているのであれば、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;

  }
}
于 2013-07-03T19:56:56.853 に答える
0

デザイナーは画像を使用して、ボタン全体に光の閃光のように見えるものを表示しました。

次に、おそらくJavaScriptを使用して、画像の動きを無限にアニメーション化します

于 2013-07-03T21:15:02.497 に答える