CSS3中Animation实现简单的手指点击动画的示例_CSS

上一篇: css3中transform属性实现的4种功... 下一篇:纯CSS3实现div按照顺序出入效果

CSS3中Animation实现简单的手指点击动画的示例

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了CSS3中Animation实现简单的手指点击动画的示例，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

本文主要介绍了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--通过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中Animation实现简单的手指点击动画的示例的文章就介绍到这了,更多相关CSS3手指点击动画内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的CSS3中Animation实现简单的手指点击动画的示例全部内容，希望文章能够帮你解决CSS3中Animation实现简单的手指点击动画的示例所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

上一篇: css3中transform属性实现的4种功... 下一篇:纯CSS3实现div按照顺序出入效果

猜你在找的CSS相关文章