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简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
May 11 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 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
PHP数字格式化
2006/12/06 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
浅析PHP开发规范
2018/02/05 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
PHP7 其他修改
2021/03/09 PHP
PHP 实现链式操作
2021/03/09 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
jQuery中filter(),not(),split()使用方法
2010/07/06 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
js面向对象的写法
2016/02/19 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python实现连续图文识别
2018/12/18 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
教师开学感言
2014/02/14 职场文书
入党自我鉴定
2014/03/25 职场文书
中国梦读书活动总结
2014/07/10 职场文书
教师岗位职责
2015/02/03 职场文书
特岗教师个人总结
2015/02/10 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS