CSS3--通过Animation实现简单的手指点击动画
·
源码:https://github.com/ChpShy/single-play-demo/tree/master/Animation
效果图:
html结构:
<body>
<div class="wrapper">
<div class="circle"></div>
<div class="finger"></div>
</div>
</body>
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);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)