css3 animatehue属性
-webkit-perspective(-moz,-o,perspective下同)表示透视范围大小;
-webkit-transform-style很好理解了,表示变换类型,preserve-3d看上去就是3D效果;
-webkit-animation-name 动画名称,像是x轴旋转(x-spin),y轴旋转(y-spin)之类。似乎与as中Tween类的x,y水平还是垂直参数类似。
-webkit-animation-duration 一次动画持续的时间,这个参数在flash Tween类也是有的,单位也是一样的,都是秒。
-webkit-animation-iteration-count表示动画循环的次数,默认是一次,参数infinite表示无穷次。还可以设为任意的正整数,比如3,动画循环3次。
-webkit-animation-timing-function运动类型。参数有:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ),这些参数归根结底就是贝赛尔曲线(bezier)(贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点:起始点、终止点(也称锚点)以及两个相互分离的中间点。滑动两个中间点,贝塞尔曲线的形状会发生变化。),四个参数,只是ease-out记ease-in-out之类的贝塞尔曲线已经设置好了,可以直接拿来用。其对应关系如下:
linear – 线性,是多大值返回多大的值,y=x
ease – 默认的运动类型, 相当于cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in – 相当于cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out – 相当于cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out – 相当于cubic-bezier(0.42, 0, 0.58, 1.0)
最后还有个很重要的东西,
@-webkit-keyframes back-y-spin {
0% { -webkit-transform:rotateY(360deg); }
50% { -webkit-transform:rotateY(180deg); }
100% { -webkit-transform:rotateY(0deg); }
}
顾名思意,关键帧,就是一些关键的位置要做出的一些变化。可以依次解释为:y轴反向旋转时,当旋转到0%的时候,对象翻转360度,其实也就是没有翻转。当旋转到50%时,翻转180%,这是真正意义上的完全翻转。旋转100%,即旋转了一圈之后,回到初始位置。
css3 animatehue属性的更多相关文章
- css3 transition属性
最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- 使用CSS3各个属性实现小人的动画
使用CSS3各个属性实现带有音乐小人的动画,完全不使用JS代码: 注:chrome浏览器效果最佳,最终效果静态图: HTML代码如下: <!DOCTYPE html> <html&g ...
- css3新增属性API
写在前面:由于CSS5标准还未完全订下来,所以各种内核的浏览器都有自己的标准,为了不使属性混淆,所以各家在各自标准前加了一个前缀. -moz- 主要是firefox火狐 -webikt-主要是chr ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS3动画属性animation的用法
转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- border-radius 样式表CSS3圆角属性
border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <l ...
随机推荐
- P3398 仓鼠找sugar 树上路径相交判断
\(\color{#0066ff}{题目描述}\) 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐 ...
- nginx+uwsgi01---flask部署
1.uwsgi.ini [uwsgi] # uwsgi 启动时所使用的地址与端口注意socket与http不同,http可以被外网访问0. socket = # 指向网站目录 chdir = /hom ...
- GO 日志追加记录
以追加的方式将程序输出到不同的日志文件,当日志文件超过10M大小时,自动清空文件. package tools import ( "fmt" "log" &qu ...
- 2 Sum
Problem Given an array of integers, find two numbers such that they add up to aspecific target numbe ...
- SpringBoot---数据缓存(未完待续)
1.概述 1.1 在Spring中使用缓存的关键是配置CacheManager,而SpringBoot为我们自动配置了多个CacheManager的实现: 1.2 SpringBoot的CacheMa ...
- KEIL的多工程多目标
https://blog.csdn.net/ybhuangfugui/article/details/51655502 https://mp.weixin.qq.com/s/CSUa4zegzz8JW ...
- auto uninstaller 简体中文版 更新下载地址
地址一(腾讯微云) 地址二(百度网盘) 提取码:3nx7 地址三(直接下载)
- cout和printf不能混用
1.两者的缓存机制不同:printf无缓冲区,而std::cout有 (其实printf也是有缓冲区的,https://blog.csdn.net/ithzhang/article/details/6 ...
- css实现背景透明文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- pat06-图4. Saving James Bond - Hard Version (30)
06-图4. Saving James Bond - Hard Version (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作 ...