0

このサイトにアクセスしました。ユーザーがクリックするLog inと、ページのロゴがアニメーション化されます。そのようなアニメーションの実装方法。役立つリンクを探しています。グーグルを試しましたが、何であるかわからないため、うまくいきませんでした。と呼ばれる？

4

2 に答える 2

3

ええ、これはかなり簡単なはずです。2人が兄弟であると仮定すると、CSSを使用してこれを行うこともできます。

CSSアプローチ

#site-logo {
   background-image: url(path/to/non-animated-image);
}
.login-button {
  /* Login default CSS here */
}
.login-button:active ~ #site-logo {
   background-image: url(path/to/animated-image.gif);
}

.login-button:active ~ .site-logo次に、ブロックでアニメーションGIFを使用します。

それ以外の場合は、jQueryまたは同様のものを使用できます

jQueryアプローチ

.login-button.on('click', function(){
   $('#site-logo').css('background-image', 'url(path/to/animated-image.gif)');
});
于 2013-03-11T19:32:53.463 に答える
2

投稿したリンクは、CSS3アニメーション/トランジションとキャンバスを使用しています。そして、それは私の好みには少し多すぎる綿毛を使用して、そのロゴにそのような単純な効果を達成します。これはあまり効率的ではなく、Josh Burgessが指摘したように、.gif画像でも同じことが簡単にできます。ただし、このロゴで発生していることのいくつかを強調したかっただけです。（これはキャンバスを使用します。これには単にgif画像が含まれている場合がありますが、ロゴにはそれだけではありません）。

あなたが見る円の基本から始めましょう、それらは画像ではありません。.gif画像を使用して、同様の効果を得ることができます。ただし、この場合、ロゴの静的部分のすべてがCSSとHTMLです。

サークルの例

CSS：

.myCircles li, .myCircles li:after {
    position: absolute;
    top: 25px;
    left: 25px;
    list-style: none;/* hide the list style */
    text-indent: -9001em;/* hide the text content */
    width: 50px;
    height: 50px;
    border-radius: 100% 100% 100% 100%;
    border-top: 5px solid #000;
    border-right: 5px solid #000;
    border-bottom: 5px solid #000;
    border-left: 5px solid transparent;
    transform: rotate(45deg);
    /* The transition effect */
    transition: all 2s;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari and Chrome */
    -o-transition: all 2s; /* Opera */
}
.myCircles li:after {
    content: ''; /* important to add this, without a content propperty set :before / :after psuedo elements will not show */
    left: 25px;
}
.myCircles li:hover {
    transform: rotate(190deg);
    opacity: 0.5;
}

HTML：

<ul class="myCircles">
    <li id="circle"> circle </li>
</ul>

Webサイトでは、：beforeおよび：afterセレクターを使用して複数の円が作成されます。上記の例に示すように。Webサイトのボタンをクリックしてアニメーションを開始すると、そのアニメーションを含むキャンバスでフェードインします。デモンストレーションのために; 単純な：hoverを追加して、このフェード効果を確認できます。（この例では、フェードインではなくフェードアウトします。）

これらのトランジションとアニメーションは、：hover（または：focus：activeなど）以外の特定のイベントで使用できますが、そのためにはJSが必要です。たとえば、onclickまたはloadイベント。

HTML / JS（jQuery）：

<button id="test">login</button>

<script>
    $(document).ready(function(){
        $('#test').click(function() {
            $('#circle').css( 'left', '100px' );
            $('#circle').css( 'opacity', '0.5' );
        });

    });
</script>

これらは、ロゴに表示される効果の基本です。ただし、その間にキャンバスを使用する手間を省くことはお勧めしません。ただし、キャンバスを使用すると、レンダリングするコンテンツの自由度が増すため、複雑なアニメーションの場合はキャンバスが便利です。キャンバスを使用する場合は、手動で多くのアニメーションを作成する準備をするか、キャンバス要素の真の力を利用するためにライブラリを検索する必要があります。

アニメーションとあなたがもっと知りたい効果に関するリンクについては:(これはSOに関する私の最初の投稿なので、2つのリンクしか提供できないようですので、css変換とキーフレームアニメーション構文を調べることをお勧めしますアニメーションの可能性についてさらに学ぶためのCSSトリックについても同様です）

CSS変換、トランジション、アニメーション：

CSS変換

キャンバス：

キャンバスアニメーション

于 2013-03-11T22:17:36.220 に答える