CSS3中Animation实现简单的手指点击动画的示例


Posted in HTML / CSS onJuly 15, 2021

本文主要介绍了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手指点击动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
html5中的一些标签学习(心得)
Oct 18 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
浅析HTML5页面元素及属性
Jan 20 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 #HTML / CSS
html form表单基础入门案例讲解
html+css实现环绕倒影加载特效
html5表单的required属性使用
Jul 07 #HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 #HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
关于CSS浮动与取消浮动的问题
You might like
牡丹941资料
2021/03/01 无线电
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
10款实用的PHP开源工具
2015/10/23 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
AngularJS 日期格式化详解
2015/12/23 Javascript
JS实现页面打印功能
2017/03/16 Javascript
jquery replace方法去空格
2017/05/08 jQuery
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Vue组件间通信 Vuex的用法解析
2019/08/05 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
会计学专业自荐信
2014/06/25 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
学校工会工作总结2015
2015/05/19 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js