效果图

<!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. 整理 js 日期对象的详细功能，使用 js 日期对象获取具体日期、昨天、今天、明天、每月天数、时间戳等，以及常用的日期时间处理方法

    在 javascript 中内置了一个 Date 对象,可用于实现一些日期和时间的操作. 本文整理 js 日期对象的详细功能,使用 js 日期对象获取具体日期.昨天.今天.明天.每月天数.时间戳等,以 ...

  2. 【十次方微服务后台开发】Day02：加密与JWT鉴权、微服务注册中心、配置中心、熔断器、网关、消息总线、部署与持续集成、容器管理与监控Rancher、influxDB、grafana

    一.密码加密与微服务鉴权JWT 1.BCrypt密码加密 Spring Security 提供了BCryptPasswordEncoder类,实现Spring的PasswordEncoder接口使用B ...

  3. PAM8403 3.3V音频功放调试笔记

    做I2S输出用了PT8211(实际上买到的丝印是GH8211), 双声道, LSB格式, 工作正常但是输出功率非常低, 喇叭声音要贴近了才能勉强听到, 所以打算做一个PT8211带功放的I2S模块. ...

  4. 个人电脑公网IPv6配置

    一.前言 自己当时以低价买的阿里ECS云服务器马上要过期了,对于搭建个人博客.NAS这样服务器的需求购买ECS服务器成本太高了,刚好家里有台小型的桌面式笔记本,考虑用作服务器,但是公网IPv4的地址实 ...

  5. war包形式安装jenkins

    (1)下载war包 输入命令:java -jar jenkins.war --httpPort=8080,更改端口 重新登录之后,输入密码创建用户等完成设置 (2)结合Tomcat安装: 将jenki ...

  6. 【机器学习】李宏毅——生成式对抗网络GAN

    1.基本概念介绍 1.1.What is Generator 在之前我们的网络架构中,都是对于输入x得到输出y,只要输入x是一样的,那么得到的输出y就是一样的. 但是Generator不一样,它最大的 ...

  7. AcWing341. 洛谷P1073， NOIP2009 最优贸易

    AcWing题目传送门 洛谷题目传送门 题目大意 \(~~~~~~\)一个投机倒把的奸商想要通过城市不太健全的贸易系统坑点钱,任意城市都可以买入或者卖出水晶球,他想尽量在便宜的城市买入,在贵的城市卖出 ...

  8. 关于 MySQL 嵌套子查询中，无法关联主表字段问题的折中解决方法

    今天在工作中写项目的时候,遇到了一个让我感到几乎无解的问题,在转换了思路后,想出了一个折中的解决方案,记录如下. 其实,问题的场景,非常简单: 就是需要查询出上图的数据,红框是从 项目产品表 中查询的 ...

  9. libcamera 简介

    libcamera 简介 libcamera 是一个开源的多媒体库,用于在 Linux 操作系统上支持多种摄像头硬件的访问,libcamera 是一个用户空间库,可用于开发基于摄像头的应用程序,如相机 ...

  10. Spark通信框架RPC介绍

    Spark通信框架RPC介绍 内容安排: 1.RPC原理 2.nio操作 3.netty简单的api 4.自定义RPC框架 RPC原理学习 什么是RPC RPC(Remote Procedure Ca ...