CSS3动画：通过Animation实现简单的手指点击动画 - Web前端

作者：98wpeu发布时间：2026-09-04分类：网页前端技术浏览：13

导读：好久没分享css3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小tips：通过Animation实现简单的手指点击动...

好久没分享css3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小tips：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。

html：

<div class="wrAPPer">
            <div class="circle"></div>
            <div class="finger"></div>
        </div>

CSS:

.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)}
        }

完整代码：

<!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>

试试吧。大家可以吧circle.png和finger.png图自己放个位置运行即可。

标签：动画手指简单 Web Animation CSS3

CSS3动画：通过Animation实现简单的手指点击动画 - Web前端

相关推荐