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 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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 无法载入mysql扩展
2010/03/12 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python程序设计入门(2)变量类型简介
2014/06/16 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
python批量修改图片大小的方法
2018/07/24 Python
详解django自定义中间件处理
2018/11/21 Python
Python识别处理照片中的条形码
2020/11/16 Python
python自动化发送邮件实例讲解
2021/01/04 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
房地产端午节活动方案
2014/08/24 职场文书
教师先进事迹材料
2014/12/16 职场文书
上甘岭观后感
2015/06/10 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python
DE1107机评
2022/04/05 无线电