2

私は、3 つの連続した直角の引用符が » » »、左から右に連続して光り、次に最も左の引用符に戻るような巧妙なアニメーションを作成しようとしています。これが他の開発者にとっても賢い効果であり、Google の餌食になるのではないかと考えています。

これのインスピレーションは明らかに、iPhone のスライドしてロックを解除する画面で、テキストが段階的に光ります。

キーフレームを使用した CSS3 アニメーションについては知っており、以前にこれらを正常に実装したことがありますが、ループのある部分をコーディングする方法がわかりません。ここでは、ある種のループを備えた Javascript が答えだと思います。私が使用しているページにはすでに jQuery があるので、jQuery 機能を使用することは特別なことではありません。

私の HTML 構造は次のようになります。

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

これを実装するための最良/最も賢い方法に関するアイデアはありますか? CSS3 アニメーションを使用する場合、すべてのブラウザーがサポートしているわけではなく、蜂蜜アナグマが気にしない場合は、最新の webkit と gecko の実装をサポートするだけで十分です。

編集 1:&raquo;ほとんどの人が行っているように、JavaScript の直角引用符ごとに CSS プロパティを個別に変更できるように、それぞれにスパン タグを追加しました。CSS3 メソッドを実行した人にとっては、必要ありません。

編集2：color:green目標が何であるかを完全に明確にするために、CSSなどの変更などを使用して、最初に最も左のものを特定の色に光らせtransition:color linear 0.4s、次に次のものはおそらく少し遅れて同じことを行います。

編集3：さらに明確にするために、私が探している正確なアニメーションは次のようになりますが、例では、多くの人にはうまくいかないと思う非常にハック的な方法を使用しています. javascript/css3 の制限に直面しているだけなのか、それともさらに改良できるのか疑問に思っています。リンク: http://css-tricks.com/examples/SlideToUnlock/

解決策の概要を含む最終編集:私は純粋な CSS3 オプションを使用することにしましたが、ここには多くの有効なオプションがあり、すべて時間を費やす価値があります。StackOverflow で複数の正解が許可されることを願っています。Google または他の場所からこの質問に来た人は、質問全体を参照して、自分に最適なものを選択してください。これはほとんどただの楽しみのためのものなので、Firefox と IE の人たちを暗闇の中に置いておいても大丈夫だと思いました。私の最終的な実装がここで確認できます: http://ezrahub.com/board/ページの上部にあり、投稿フォームを展開するために使用されます。1 つの癖は、テキスト サイズを変更する場合background-size、CSS スタイルシートのプロパティも変更する必要があることです。使ったbackground-size: 120px 50%;私の場合、いじってみると、効果がどのように変化するかがわかります。

みんながこれを楽しんで、あなたの作品に使って楽しんでください! @JaredFarrish などの自閉症のモデレーターに声をかけてください。(なぜそんなに怒っているの？)

4

3 に答える 3

4

楽しみのために、純粋な css を使用する方法を次に示します。ブラウザーのサポートは非​​常に限られています。

.glowquote {
    background: -webkit-linear-gradient(left, black 0%, green 40%, green 60%, black 100%);
    background-size: auto 50%;

    padding: 0 100px;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    -webkit-animation: gradient-animation infinite 1s linear;
}

http://jsfiddle.net/grc4/uF8H2/3/

編集: jsfiddle は、Firefox で部分的に動作するようになりました。グラデーション アニメーションは正しく機能し、唯一機能しないのはテキスト クリッピング ( -moz-background-clip:textdoes not exist ) です。これは、背景の上に画像マスクを使用することで解決できます。

于 2012-07-02T04:22:31.783 に答える
2

まず、個々の矢印の周りにスパンを配置して、CSS 設定を個別に変更できるようにします。

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span></span>

次に、 jQuery UIを使用していると仮定すると(私の知る限り、コア jQuery は色をアニメーション化しないため)、次のようなことができます。

function doGlow(numTimes) {

    var $arrows = $("span.glowquote span");

    function nextGlow(i) {
        $arrows.eq(i).animate({
            color: "green"
        }, 400).animate({
            color: "black"
        }, 400, function() {
            i = (i + 1) % $arrows.length;
            if (i === 0) numTimes--;
            if (numTimes > 0) nextGlow(i);
        });
    }
    nextGlow(0);
}

デモ: http://jsfiddle.net/KrL44/1

(または、無期限にループし続けた私のデモの元のバージョンは次のとおりです: http://jsfiddle.net/KrL44/ )

于 2012-07-02T03:48:39.497 に答える
1

これを試して：

html:

<span class="glowquote"><span>&raquo;</span> <span>&raquo;</span> <span>&raquo;</span> </span>

js:

$(document).ready(function(){
    var i = 0;
    function run() {
        $('.glowquote span:eq('+ i +')').animate({color: 'green'}, 500, function(){
         $(this).animate({color: 'black'}, 500);
           i++;
           if (i > 2) { i = 0 } 
           run() 
        })
   }
 run()            
})

http://jsfiddle.net/wQ9AT/

于 2012-07-02T03:56:56.727 に答える