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转换元素的透视视图

  • 相关阅读:
    oracle 数据库服务名怎么查
    vmware vsphere 6.5
    vSphere虚拟化之ESXi的安装及部署
    ArcMap中无法添加ArcGIS Online底图的诊断方法
    ArcGIS中字段计算器(高级计算VBScript、Python)
    Bad habits : Putting NOLOCK everywhere
    Understanding the Impact of NOLOCK and WITH NOLOCK Table Hints in SQL Server
    with(nolock) or (nolock)
    What is “with (nolock)” in SQL Server?
    Changing SQL Server Collation After Installation
  • 原文地址:https://www.cnblogs.com/diwangkaige/p/10556352.html
Copyright © 2011-2022 走看看