BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】CSS3Animationで実現する簡単な指のクリックアニメーションの例

2022-01-21 02:39:59

今回は、CSS3 Animationで簡単な指のクリックアニメーションを作成した例を、以下のように共有で紹介します。

レンダリング 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <title> CSS3 - Simple finger click animation via Animation</title>
        <style>
        .wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0 auto;background-color:black}
        .circle{position:absolute;left:50%;top:50%;margin:-70px 0 0 -46px;
　　　　　　background: url(". /circle.png") center center no-repeat;
          width:62px;height:62px;animation:circleHide 1s ease infinite both}
        .finger{background:url(". /finger.png") center center no-repeat;width:100px;height:140px;margin:170px auto;animation:fingerHandle 1s ease infinite both}
        @keyframes fingerHandle{
            0%{transform:none}
            70%{transform:scale3d(.8,.8,.8)}
            100%{transform:none}
        }
        @keyframes circleHide{
            0%{opacity:0;transform:scale3d(0,0,0)}
            70%{opacity:1;transform:scale3d(1.2,1.2,1.2)}
            100%{opacity:0;transform:scale3d(0,0,0)}
        }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="circle"></div>
            <div class="finger"></div>
        </div>
    </body>
</html>

CSS3アニメーションでこの記事では、単純な指のクリックアニメーションの例を実現するために導入され、より関連するCSS3指のクリックアニメーションの内容は、スクリプトホーム以前の記事を検索したり、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートすることを願っています！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します