好久没分享CSS3动画的知识点了，近期都在忙于后台前端开发项目，难道今天有点时间，分享下关于CSS3动画知识点，今天我们看一个小TIPS：通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。
HTML：
CSS:.wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0auto;background-color:black}
.circle{position:absolute;left:50%;top:50%;margin:-70px00-46px;
background:url("./circle.png")centercenterno-repeat;
width:62px;height:62px;animation:circleHide1seaseinfiniteboth}
.finger{background:url("./finger.png")centercenterno-repeat;width:100px;height:140px;margin:170pxauto;animation:fingerHandle1seaseinfiniteboth}
@keyframesfingerHandle{
0%{transform:none}
70%{transform:scale3d(.8,.8,.8)}
100%{transform:none}
}
@keyframescircleHide{
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)}
}
完整代码：html>
CSS3--通过Animation实现简单的手指点击动画
.wrapper{position:relative;overflow:hidden;width:500px;height:500px;margin:0auto;background-color:black}
.circle{position:absolute;left:50%;top:50%;margin:-70px00-46px;
background:url("./circle.png")centercenterno-repeat;
width:62px;height:62px;animation:circleHide1seaseinfiniteboth}
.finger{background:url("./finger.png")centercenterno-repeat;width:100px;height:140px;margin:170pxauto;animation:fingerHandle1seaseinfiniteboth}
@keyframesfingerHandle{
0%{transform:none}
70%{transform:scale3d(.8,.8,.8)}
100%{transform:none}
}
@keyframescircleHide{
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)}
}
试试吧。大家可以吧circle.png和finger.png图自己放个位置运行即可。
