CSS3用Animation制作手指点击动画的代码怎样编辑
|
这篇主要是介绍“CSS3用Animation制作手指点击动画的代码怎样写”的内容了，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家解决CSS3用Animation制作手指点击动画的代码怎样写的问题，下面我们一起来了解看看吧。 <!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> 以上就是关于“CSS3用Animation制作手指点击动画的代码怎样写”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，小编每天都会为大家更新不同的知识。 （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
