css手指代码,CSS3动画:通过Animation实现简单的手指点击动画
好久没分享CSS3动画的知识点了,近期都在忙于后台前端开发项目,难道今天有点时间,分享下关于CSS3动画知识点,今天我们看一个小TIPS:通过Animation实现简单的手指点击动画。鼠标放上去会有个特效。
HTML:
CSS:.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)}
}
完整代码:html>
CSS3--通过Animation实现简单的手指点击动画
.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)}
}
试试吧。大家可以吧circle.png和finger.png图自己放个位置运行即可。
css手指代码,CSS3动画:通过Animation实现简单的手指点击动画相关推荐
- CSS3--通过Animation实现简单的手指点击动画
源码:https://github.com/ChpShy/single-play-demo/tree/master/Animation 效果图: html结构: <body><div ...
- css手指点击样式,CSS3-通过 Animation实现手指点击动画效果代码
CSS3-通过 Animation实现手指点击动画效果代码 html代码: css代码.wrapper { /* position: absolute; top: 50%; left: 50%; */ ...
- android+酷炫动画效果,Android简单酷炫点击动画(附源码)
在Android5.0之前, Android的点击效果一直很low, 即使5.0的波纹效果也不尽如人意. 而我之前写过一种比较酷炫的点击效果, 最近抽了点时间完善一下, 把阴影效果加入了进去, 大家先 ...
- android 酷炫加载动画,一款非常简单酷炫的LoadingView动画效果
今天看到一个银行的APP上面的loadingview 挺好的,就尝试着自己实现,觉得很简单,但自己实现起来还是发现了一些问题. LoadingView和下图类似: 实现的代码也不是很复杂,就是小球的运 ...
- 【Android 属性动画】属性动画 Property Animation 与 视图动画 View Animation 区别
文章目录 一.动画效果添加对象 二.动画效果类型 三.动画效果与实际属性 四.开发复杂程度 属性动画 Property Animation 可以为 任何对象 ( View 对象 / 非 View 对象 ...
- Android 自动动画布局更新 使用,在RecyclerView上使用布局动画(Layout animation)
自从Material Design发布以来,我对一些视频中演示的网格铺开动画感到惊讶.这是一种斜对角线动画,让activity从上到下从左到右铺开.非常漂亮. 我一直试图尝试所有能得到那种效果的方法. ...
- iOS 核心动画 Core Animation浅谈
代码地址如下: http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVi ...
- Android 动画解析(一) 逐帧动画(Frame Animation)
简介 开发Android的同学都知道,Android中的动画有逐帧动画(Frame Animation).补间动画(Tween Animation)以及属性动画.其中,逐帧动画(Frame Anima ...
- android打印动画,用 Android 实现一条小金鱼游动动画(超棒)
原标题:用 Android 实现一条小金鱼游动动画(超棒) 前言 此篇中的小鱼动画是模仿国外一个大牛做的flash动画,第一眼就爱上它了,简约灵动又不失美学,于是抽空试着尝试了一下,如下是我用Andr ...
- css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程 以下讨论的是和css3 动画 属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
最新文章
- php phpunit selenium,phpunit+selenium环境筹建
- 年末最大AI盛典!2020深度学习开发者峰会报名启动
- 自我分析colly的robots源码
- Linux版本_linux版本信息解析
- 四、物理优化(1)范式化
- Android.os.SystemClock
- 后缀的形容词_玩转英语词汇-词汇策略之形容词后缀
- 关于图像三通道和单通道的解释
- python中的多线程的优点_Python中多线程编程的优点是什么?
- 在将计算机技术应用于会计工作的初期,所开发的会计核算软件主要用于,2013年会计从业考试《电算化》会计核算软件...
- bochs运行xp_bochs xp镜像完整免费版
- Arduino基础2
- Unity 计算屏幕视口UV坐标的几种方法
- 2018百度云ABC智能物联大会发布世界顶级智能边缘产品BIE
- 运筹学 --- 线性规划
- 深圳软件测试培训:简述关系型数据库和非关系型数据库
- 费马大定理n=3时的欧拉证明,x^3+y^3=z^3无xyz≠0的整数解
- 360手机刷机:360N6lite刷机
- 【CSS】属性书写顺序
- 山科-数据库实验报告