CSS3中Animation实现简单的手指点击动画的示例
发布时间:2021-07-12 16:57:05 作者:YJUI 我要评论
本文主要介绍了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实现简单的手指点击动画的示例的文章就介绍到这了,更多相关CSS3手指点击动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了基于CSS3的animation属性实现微信拍一拍动画效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参2020-06-22
CSS3动画之利用requestAnimationFrame触发重新播放功能
这篇文章主要介绍了利用requestAnimationFrame重新播放(触发)CSS3动画,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-11- 这篇文章主要介绍了css3的动画特效之动画序列(animation) 的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-22
- CSS3的animation属性可以像Flash制作动画一样,通过控制关键帧来控制动画的每一步,实现更为复杂的动画效果。下面通过本文给大家分享基于CSS3 animation动画属性实现轮播图2017-09-12
CSS3与动画有关的属性transition、animation、transform对比(史上最全
这篇文章主要介绍了CSS3与动画有关的属性transition、animation、transform对比,通过浏览器兼容性,用法和对比更深刻的展示了彼此之间的异同,具体操作步骤大家可查看下文2017-08-18- 本篇文章对CSS3中的animation的使用进行了详细的介绍,需要的朋友可以参考下2013-05-09
最新评论