浏览器的内核:

  谷歌的内核是: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效果的更多相关文章

  1. 前端笔记之HTML5&CSS3(下)2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  2. 视频特效制作:如何给视频添加边框、水印、动画以及3D效果

    2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...

  3. css3动画 2D 3D transfrom

    2D transform 例如transform: translate(1px,30px); translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当 ...

  4. 9.css3动画-2D/3D变形--trasform

    transform: None不转换. Translate(x,y)通过设置X轴的值进行移动. translateY(y)通过设置Y轴的值进行移动. Scale(x,y)定义2D缩放. ScaleX( ...

  5. CSS3基础 02(2D /3D)

    一.2D转换 概念:就是元素在2D平面上实现移动,旋转,缩放,斜切的操作就称之为2D转换 语法:transform:值 值:移动,旋转,缩放,斜切 (1.1)移动 transform:translat ...

  6. css3 --- 翻页动画 --- javascript --- 3d --- Action

    用css3和javascript做一个翻页动画<Action> 如有疑问请参照我的上一篇随笔:http://www.cnblogs.com/kodoyang/p/Html_Css3_Car ...

  7. CSS3之过渡及2D变换

    transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...

  8. css3 --- 翻页动画 --- javascript --- 3d --- 准备

    用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transi ...

  9. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

随机推荐

  1. 为BindingList添加Sort

    最近在优化WPF性能时, 发现在特定条件下BindingList比ObservableCollection性能更高, 因为它提供Disable/Enable 更改通知的方法.这样我们可以不需要很频繁的 ...

  2. Connection reset by peer的常见原因及解决办法

    转自:https://blog.csdn.net/xc_zhou/article/details/80950753 1,如果一端的Socket被关闭(或主动关闭,或因为异常退出而 引起的关闭),另一端 ...

  3. lung 分割论文

    <4D Lung Tumor Segmentation via Shape Prior and Motion Cues > Abstract— Lung tumor segmentatio ...

  4. C++11/14的新特性——更简洁

      新的字符串表示方式——原生字符串(Raw String Literals) C/C++中提供了字符串,字符串的转义序列,给输出带来了很多不变,如果需要原生义的时候,需要反转义,比较麻烦. C++提 ...

  5. PJzhang:经典子域名爆破工具subdomainsbrute

    猫宁!!! 参考链接: https://www.waitalone.cn/subdomainsbrute.html https://www.secpulse.com/archives/5900.htm ...

  6. 使用BCG创建Pie

    1.新建一个BCG的对话框,添加一个文本框,并修改属性,添加成员变量,并设置Category为Control. 2.在class CCharPieDlg : public CBCGPDialog修改文 ...

  7. Pycharm 设置TextStyle

    之前在脚本中选择了一个字符串, PyCharm会"高亮"所有相同的字符串, 但是我不满意这个"高亮"的颜色,因为和背景色太相似了,所以需要做一下操作,修改这个& ...

  8. 使用Unity容器实现属性注入

    简介 Unity :是微软用C#实现的轻量级,可扩展的依赖注入容器. 控制反转:(Inversion of Control,缩写为IoC),是用来消减程序之间的耦合问题,把程序中上层对下层依赖,转移到 ...

  9. Python小世界:匿名函数、高阶函数、推导式

    前言 木子本人搞起Python已有多年,一直觉得什么都会,但是有时候实操起来,才觉得很多底层基础的知识都没有彻底的灵活掌握. 另外,网上关于Python基础知识的各种普及已有太多太多. 附上相关大神的 ...

  10. Sublime Text 3 配置 sass

    先安装Sublime Text的sass 和 sass build插件, Sublime Text新建一个test.scss文件 $color: #369;  body {     backgroun ...