zoukankan      html  css  js  c++  java
  • css3的了解和方法

    浏览器内核

    谷歌  Webkit     火狐  Gecko    IE  Trident

    国内的浏览器内核都是Webkit

    CSS3的兼容性

    CSS3针对同一样式在不同浏览器的兼容,需要在样式的属性上加内核前缀

    谷歌  -webkit-transtion:

    Opear  -o-transtion:

    Firefox  -moz-transtion:

    IE  -ms-transtion:

    CSS3中的过渡属性 transition

    transition 简写属性,用于在一个属性中设置四个过渡属性

    eg:transition:width  2s  linear  1s;

    transition-property   规定应用过渡的css属性名称

    transition-duration   定义过渡效果花费的事件,默认时间是0

    transition-timing-function  规定过渡效果的时间曲线,默认是'ease'

    transition-delay   规定过渡效果何时开始,默认是0

    注意:时间一定要带单位

    CSS3动画  animate

    挡在@Keyframes创建动画,把它绑定到一个选择器,否则动画不会有任何效果

    (1)规定动画的名称

    (2)规定动画的时长

    注意:如果省略持续时间,动画将无法运行,因为默认值是0

    复制代码
     1 div{
     2          100px;
     3         height: 100px;
     4         background: red;
     5         animate: move  5s;
     6 }
     7 @Keyframes   move{
     8         from{
     9             background:red;
    10        }
    11       to{
    12             background:pink;
    13      }
    14 }
    15 
    16     
    复制代码

    CSS3动画的属性

    animate   所有动画的简写属性,除了animate-play-state属性

    @Keyframes  规定动画

    animate-name  规定@Keyframe动画的名称

    animate-duration  规定动画完成一个周期所花费的秒或毫秒,默认是0

    animate-timing-function  规定动画的速度曲线,默认是"ease"

    animate-fill-mode  规定当动画不播放时,要应用到的元素的样式

    animate-delay  规定动画何时开始,默认是0

    animate-iteration-count  规定动画被插入的次数,默认是1

    animate-direction  规定动画是否在同一周期逆向播放,默认是"normal"

    animate-plat-state  规定动画是否正在运行或暂停,默认是"running"

    2D、3D转换属性

    transfrom  向元素应用2D或3D转换

    transform-orgin  允许你改变被转换元素的位置

    transform-style  规定被嵌套元素如何在3D空间中显示

    值:flat  表示所有子元素在2D平面呈现

      preserve-3d  表示所有子元素在3D空间中显示

    perspective  规定了3D元素的透视效果

    perspective-origin  规定了3D元素底部的位置

    perspective-visibility  定义元素在不面对屏幕时是否出现

    2D转换方法

    matrix(n1,n2,n3,n4,n5,n6)  定义2D转换,使用六个值得矩阵

    translate(x,y)  定义2D转换,沿着x和y轴移动的元素

    translateX(x)  定义 2D转换,沿着x轴移动

    translateY(y)定义2D转换,沿着y轴移动

    scale(x,y)定义2D缩放转换,改变元素的宽度和高度

    scaleX(n)  定义2D缩放转换,改变元素的宽度

    scaleY(n)   定义2D缩放转换,改变元素的高度

    rotate(angle)  定义2D转换,在参数中规定角度

    skew(x-angle,y-angle)  定义2D倾斜转换,沿着x轴和y轴

    skewX(x) 定义2D的倾斜转换,沿着x轴

    skewY(y)  定义2D的倾斜转换,沿着y轴

    3D转换方法

    matrix(n1,n2,n3,n4,n5,n6......n16)  定义3D转换,使用十六个值得4*4的矩阵

    rotate3d(x,y,z,angle)定义3D旋转

    rotateX(x) 围绕其在一个给定度数x轴旋转的元素

    rotateY(y) 围绕其在一个给定度数y轴旋转的元素

    rotateZ(z) 围绕其在一个给定度数z轴旋转的元素

    translate3d(x,y,z)  定义3D转换

    translateX(x)   定义3D转换,仅使用于x轴的值

    translateY(y)   定义3D转换,仅使用于y轴的值

    translateZ(z)   定义3D转换,仅使用于在z轴的值

    scale3d(x,y,z) 定义3D缩放旋转

    scaleX(x)定义3D缩放旋转,通过给定一个x轴的值

    scaleY(y)定义3D缩放旋转,通过给定一个y轴的值

    scaleZ(z)定义3D缩放旋转,通过给定一个z轴的值

    perspective(n)  定义3D转换元素的透视视图

  • 相关阅读:
    个人:我的2011生活看板
    个人管理:公司做的稻盛阿米巴培训笔记
    使用TOGAF来做业务架构 价值驱动产品开发
    30天敏捷结果(21)正面失败,吸取教训,改善结果
    2010年12月blog汇总:敏捷个人
    30天敏捷结果(25):固定时间,灵活范围
    101与金根回顾敏捷个人:(11)执行力
    团队管理:设计团队的一周
    云:构建云计算的核心技术与平台
    读书笔记:千万别学英语
  • 原文地址:https://www.cnblogs.com/diwangkaige/p/10556352.html
Copyright © 2011-2022 走看看