效果图

<!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实现简单的手指点击动画的更多相关文章

  1. CSS3解决移动端手指点击或滑动屏幕时出现的浅蓝色背景框

    当时做完移动端页面发现点击图片(背景图按钮),出现了浅蓝色背景,实属影响页面美观,解决这一问题代码如下 html,body{ -webkit-tap-highlight-color: rgba(0,0 ...

  2. CSS3使用Animation为同一个元素添加多个动画效果

    本篇文章由:http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/ CSS3 Animat ...

  3. CSS3中Animation为同一个元素添加多个动画效果

    CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑 ...

  4. 在滑动3D模型（Cube）时，手指点击进入相应的某一部分

    public void OnClickRay() { Ray ray = new Ray(); RaycastHit shootHit; ray.origin = cameras.transform. ...

  5. 【Android测试】【随笔】模拟双指点击

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5258660.html 手势 看到这个标题,很多人会想一想 ...

  6. unity 单指双指事件（单指点击移动，双指滑动拖放）

    using System.Collections; using System.Collections.Generic; using UnityEngine; public class TouchCon ...

  7. iOS上手指点击波纹效果的实现

    https://www.jianshu.com/p/35e6f53ca0fe 2016.10.19 22:00* 字数 135 阅读 2468评论 2喜欢 7 闲暇时间做了一个反馈手指点击屏幕的效果, ...

  8. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  9. css3中Animation

    CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...

  10. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

随机推荐

  1. QT如何设置模态窗口、qss中的image丢失、进程自杀、任务日志、命令行中文乱码

    1.设置模态窗口 对窗口设定属性如下: this->setWindowModality(Qt::WindowModal); 注意模态窗口只对父窗口生效,在建立窗口的时候要注意,如果不是指针也可以 ...

  2. python安装过程

    1.在官网下载,点击进入安装包. 2.把Add勾上,会自动配置环境变量. 3,这些是要下载的东西,要全部勾上. 4.这里特别注意路径,把路径改成自己想放的盘里面. 5.配置环境变量,在此电脑搜索 编辑 ...

  3. vue3学习第一天

    第一章 Options API与Composition API 重写双向绑定 vue2 基于Object.defineProperty()实现 vue3 基于Proxy proxy与Object.de ...

  4. python里面一些零碎知识点

    1. Python中反斜杠可以用在一行结尾做续行符使用. 2. pytorch中,一般来说如果对tensor的一个函数后加上了下划线,则表明这是一个in-place类型.in-place类型是指,当在 ...

  5. 使用IntelliJ IDEA打开一个项目步骤

    目录 1.普通java项目 步骤一.使用IDEA打开一个新的项目 步骤二.设置项目的SDK 步骤三.设置项目的src为Resources Root​ 2.Maven项目 前三步同普通java项目相同 ...

  6. BBS项目功能编写逻辑思路汇总

    BBS项目功能编写逻辑思路汇总 一.BBS创数据表 二.BBS注册功能 三.BBS登录功能 四.BBS首页搭建 五.BBS修改密码 六.BBS个人站点 七.BBS文章详情 八.BBS导入模块 九.BB ...

  7. 揭开华为云CodeArts TestPlan启发式测试设计神秘面纱！

    摘要:质量是产品的生死线. 本文分享自华为云社区<揭开华为云CodeArts TestPlan启发式测试设计神秘面纱!>,作者:华为云PaaS服务小智 . 2019年12月20日,是美国波 ...

  8. 对 Pulsar 集群的压测与优化

    前言 这段时间在做 MQ(Pulsar)相关的治理工作,其中一个部分内容关于消息队列的升级,比如: 一键创建一个测试集群. 运行一批测试用例,覆盖我们线上使用到的功能,并输出测试报告. 模拟压测,输出 ...

  9. Luogu P6394 樱花，还有你题解

    原题链接:樱花,还有你 $\scr{\color{DarkOrchid}{Solution}}$ Subtask1 这是一个送分的:总和都不到$n$,无论怎么收集,花瓣数肯定不到$n$,输出impos ...

  10. 记一次线上FGC问题排查

    引言 本文记录一次线上 GC 问题的排查过程与思路,希望对各位读者有所帮助.过程中也走了一些弯路,现在有时间沉淀下来思考并总结出来分享给大家,希望对大家今后排查线上 GC 问题有帮助. 背景 服务新功 ...