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进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
Nov 02 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
table不让td文字溢出操作方法
Dec 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&amp;&amp;mysql)六
2006/10/09 PHP
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
解析PHP自带的进位制之间的转换函数
2013/06/08 PHP
50个PHP程序性能优化的方法
2014/06/02 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
见习期自我鉴定
2014/01/31 职场文书
幼儿园儿童节主持词
2014/03/21 职场文书
北京奥运会主题口号
2014/06/13 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
司考复习计划
2015/01/19 职场文书
邀请函模板
2015/02/02 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫