css手指点击样式,CSS3-通过 Animation实现手指点击动画效果代码

CSS3-通过 Animation实现手指点击动画效果代码

html代码：

css代码.wrapper {

/* position: absolute;

top: 50%;

left: 50%; */

position: relative;

overflow: hidden;

width: 500px;

height: 500px;

margin: 0 auto;

background-color: black;

/* margin: -250px 0 0 -250px; */

}

.circle {

position: absolute;

left: 50%;

top: 50%;

margin: -70px 0 0 -46px;

background: url("./shou2.png") center center no-repeat;

width: 82px;

height: 62px;

animation: circleHide 1s ease infinite both;

}

.finger {

background: url("./shou1.png") center center no-repeat;

width: 100px;

height: 140px;

margin: 170px auto;

animation: fingerHandle 1s ease infinite both;

}

动画效果1：@keyframes fingerHandle {

0% {

transform: none;

}

70% {

transform: scale3d(.8, .8, .8);

}

100% {

transform: none;

}

}

动画2：@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);

}

}