CSS3-通过 Animation实现手指点击动画效果代码
html代码：
css代码.wrapper{
/*position:absolute;
top:50%;
left:50%;*/
position:relative;
overflow:hidden;
width:500px;
height:500px;
margin:0auto;
background-color:black;
/*margin:-250px00-250px;*/
}
.circle{
position:absolute;
left:50%;
top:50%;
margin:-70px00-46px;
background:url("./shou2.png")centercenterno-repeat;
width:82px;
height:62px;
animation:circleHide1seaseinfiniteboth;
}
.finger{
background:url("./shou1.png")centercenterno-repeat;
width:100px;
height:140px;
margin:170pxauto;
animation:fingerHandle1seaseinfiniteboth;
}
动画效果1：@keyframesfingerHandle{
0%{
transform:none;
}
70%{
transform:scale3d(.8,.8,.8);
}
100%{
transform:none;
}
}
动画2：@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);
}
}
