css3的过渡、动画、2D、3D效果
浏览器的内核:
谷歌的内核是:webkit
火狐的内核是:gecko
Ie的内核是:trident
欧鹏的内核是:presto
国内浏览器的内核:webkit
css3针对同一样式在不同的浏览器的兼容,需要在样式属性前加上内核前缀。
内核前缀:
transtion(css3的过渡属性)
谷歌:-webkit-transition
opera:-o-transition
Firefox:-moz-transition
Ie:-ms-transition
css3中的过渡属性
transition:简写属性,用于在一个属性中设置四个过渡属性
transition-property:规定应用过渡的css属性的名称
transition-duration:定义过渡效果花费的事件,默认为0;
transition-timing-function:规定过渡效果的时间曲线,默认是“ease”
注意:时间一定要带单位;
css3中的动画 animation
属性:
@keyframes 规定动画
animation 所有动画属性的简写属性,除了 animation-play-state 属性
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"
animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
css3中的2D和3D效果
css3中的2D和3D特效都是方法(函数)提供了四个方法
2D效果:
translate() 平移,两个参数
rotate() 参数是number deg()角度
scale() 缩放,参数是number ,1代表不变
skew() 拉伸,
3D效果:
原理:近大远小,
视距:perspective,写在父级元素上
转换属性:
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。(内部子元素在3d空间中显示)
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
css3的过渡、动画、2D、3D效果的更多相关文章
- 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画
一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...
- css3动画 2D 3D transfrom
2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...
- 9.css3动画-2D/3D变形--trasform
transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...
- CSS3基础 02(2D /3D)
一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translat ...
- css3 --- 翻页动画 --- javascript --- 3d --- Action
用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- css3 --- 翻页动画 --- javascript --- 3d --- 准备
用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...
- CSS3中2D/3D转换、过渡、动画
转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...
随机推荐
- WPF GridView中的CellTemplate失效的原因
最近做一个ListView的Style时,发现一个问题, 就是我的GridView的GridViewColumn的CellTemplate无论是用StaticResource还是DynamicReso ...
- orcale用户名的创建及权限设置
oracle数据库的权限系统分为系统权限与对象权限.系统权限( database system privilege )可以让用户执行特定的命令集.例如,create table权限允许用户创建表,gr ...
- Jmeter提取响应数据的结果保存到本地的一个文件
原文地址: https://www.cnblogs.com/whitewasher/p/9504728.html 当做性能压测时,可能会需要把响应数据的一些字段统计出来.这里简单介绍一下. 1.首先把 ...
- UVa 714 Copying books 贪心+二分 最大值最小化
题目大意: 要抄N本书,编号为1,2,3...N, 每本书有1<=x<=10000000页, 把这些书分配给K个抄写员,要求分配给某个抄写员的那些书的编号必须是连续的.每个抄写员的速度是相 ...
- 参数化之利用CSV Data Set Config从文件读取参数并关联变量
众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...
- Behave + Selenium(Python)一:
Behave 介绍:(来自T先生) 最近一个项目用了behave来做测试,因为之前没有接触过,所以写下最近的心得总结. 做自动化的人估计对selenium已经不是很陌生了,但是对于Behave工具,估 ...
- 微软 codeplex 团队
http://www.codeplex.com/site/users/view/Microsoft
- SSO跨域 CodeProject
http://www.codeproject.com/Articles/114484/Single-Sign-On-SSO-for-cross-domain-ASP-NET-appl 翻译: http ...
- JavaScript高级程序设计学习笔记第十四章--表单
1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...
- chromium浏览器开发系列第四篇:如何调试最新chromium
接二连三的事情,时间比较紧张,但是还是没有把这个系列的文章丢掉,因为这也是对自己知识的总结吧.提倡大家多写写,以后再看的时候会有种莫名的小激动. 上周写的是chromium的目录结构,好像大家不太感兴 ...