zoukankan      html  css  js  c++  java
  • 关于CSS3的变形、过渡、动画、关联属性

    一、变形

    transform:能够对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。
    演示样例:

    transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
    /*矩阵变形*/
    matrix(<number>,<number>,<number>,<number>,<number>,<number>);
    /*透视*/
    perspective(length);

    transition:过度属性
    transition:过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果開始时间;

    transition: property duration timing-function delay;
    /*演示样例*/
    transition:1s ease all;
    -webkit-tansition:1s ease all;
    -moz-transition:1s ease all;
    -o-transition:1s ease all;

    rotate():二维空间旋转元素。
    若元素设置了perspective值,可用rotate3d()实现三维空间内旋转。

    rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/
    rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/
    rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

    scale()

    scaleX(<number>)/*仅仅在X轴(水平方向)缩放元素*/
    scaleY(<number>)/*仅仅在Y轴(垂直方向)缩放*/
    scaleZ(<number>)/*仅仅在Z轴缩放,前提:元素设定透视值*/

    translate([,]):移动,是位移量。

    translateX(<translation-value>);/*仅仅在X轴(水平方向)移动*/
    translateY(<translation-value>);/*仅仅在Y轴(垂直方向)移动*/
    translateZ(<translation-value>);/*仅仅在Z轴移动。前提:元素设置透视值*/

    skew():倾斜

    skewX(<angle>);/*仅仅在X轴(水平)倾斜*/
    skewY(<angle>);/*仅仅在Y轴(垂直)倾斜*/

    matrix(a,c,e,b,d,f):矩阵变形,c、e的值用正弦或余弦值表示。
    a:表示scaleX(); X轴缩放
    c:skewY(); Y轴倾斜
    e:skewX(); X轴倾斜
    b:scaleY(); Y轴缩放
    d:translateX() X轴移动
    f:translateY() Y轴移动

    transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

    perspective():透视

    .wrap{
        perspective:1000px; 
    }
    .wrap .child{
        transform:perspective(1000px);
    }

    二、过渡

    transition-property:过度的属性

    transition-property:all;/*针对全部元素都有过度效果*/
    transition-property:none;/*没有元素有过度效果*/
    transition-property:ident;/*指定css属性有过度效果。比如width*/

    transition-duration:过度时间
    transition-delay:延迟时间。为负数时,过度动作会从该时间点開始显示。之前的动作会被截断。


    transition-timing-function:过度效果,默认ease。

    transition-timing-function:ease;/*缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔*/
    transition-timing-function:linear;/*线性效果,等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/
    transition-timing-function:ease-in;/*渐显效果。等同于cubic-bezier(0.42,0,1.0,1.0)函数*/
    transition-timing-function:ease-out;/*渐隐效果。等同于cubic-bezier(0,0,0.58,1.0)函数*/
    transition-timing-function:ease-in-out;/*渐显渐隐效果,等同于cubic-bezier(0.42,0,0.58,1.0)函数*/
    transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/

    三、动画

    animation-name:动画名称。必须与规则@keyframes配合使用。由于动画名称由@keyframes定义,假设提供多个属性值用逗号隔开。


    @keyframes相当于一个命名空间。后面跟一个名词,假设在class中的animation-name定义了与之相应的name就能够运行动画。定义动画时可直接使用关键字from和to,从一种状态过度到还有一种状态。

    .animation_name{
        left:0;
        top:100px;
        position: absolute;
        -webkit-animation: 0.5s 0.5s ease infinite alternate;
        -moz-animation: 0.5s 0.5s ease infinite alternate;
        -webkit-animation-name:demo;
        -moz-animation-name:demo;
    }
    @-webkit-keyframes demo{
        from{left:0;}
        to{left:400px;}
    }
    @-webkit-keyframes demo1{
        0%{left:0;}
        50%{left:200px;}
        100%{left:400px;}
    }

    animation-duration:动画时间

    animation-timing-function:播放方式。取值例如以下:
    ease:缓解效果,等同于cubic-bezier(0.25,0.1,0.25,1.0)函数,既立方贝塞尔。


    linear:线性效果
    ease-in:渐显效果
    ease-out:渐隐效果
    ease-in-out:渐显渐隐效果
    step-start:立即跳转到动画结束状态
    step-end:保持动画開始状态,到动画运行时间结束。立即跳转到动画结束状态
    step([,[start | end]]?):第一个參数number为指定的间隔数,即把动画分为n步阶段性显示,第二个參数默觉得end,设置最后一步状态,start为结束时的状态,end为開始时的状态,若设置与animation-fill-mode的效果冲突,以animation-fill-mode的设置为动画结束状态。


    cubic-bezier(,,,):特殊的立方赛贝尔曲线效果

    animation-delay:開始播放时间

    animation-iteration-count:播放次数,取值为infinite时表示无限循环播放

    animation-direction:播放方向,取值为:
    normal:正常方向
    reverse:动画反向运行。方向始终与normal相仿
    alternate:动画会循环正反交替运动

    animation-fill-mode:播放后的状态,取值:
    none:默认值,不设置
    forwards:结束后保持动画结束的状态
    backwards:结束后返回动画開始时状态
    both:结束后可遵循forwards和backwards两个规则
    animation-play-state:检索或设置对象动画的状态,取值:
    running:默认,运动
    paused:暂停

    四、关联属性

    transform-origin:变形原点,transform的參照点,默觉得元素的中心点。

    有两个參数,參数一为横坐标,參数二为纵坐标。


    percentage:用百分比指定坐标值。可负
    length:用长度指定坐标值,可负
    left center right:水平方向取值
    top center bottom:垂直方向取值

    perspective-prigin:透视原点。定义在X轴和Y轴的3D元素,同意改变3D元素的底部位置,定义该属性时。它是一个元素的子元素,透视图,而不是元素本身。
    注意:使用该属性必须和perspective属性一起用,仅仅影响3D转换的元素。
    取值:percentage、length、left、center、right、top、center、bottom

    backface-visibility:隐藏内容的背面,默认情况下背面可见,反转后变换的内容仍然可见。当backface-visibility设置hidden时,旋转后内容将隐藏,旋转后正面将不再可见。


    取值:visible、hidden
    transform-style:3D呈现,设置内嵌的元素在3D空间怎样呈现,有两个值:
    flat:全部子元素在2D平面呈现
    preserve-3d:保留3D空间

  • 相关阅读:
    Java 实现 蓝桥杯 生兔子问题
    Java实现 蓝桥杯 基因牛的繁殖
    Java实现 蓝桥杯 基因牛的繁殖
    Java实现 蓝桥杯 基因牛的繁殖
    Java实现 LeetCode 33 搜索旋转排序数组
    Java实现 LeetCode 33 搜索旋转排序数组
    Java实现 LeetCode 33 搜索旋转排序数组
    深入探究VC —— 资源编译器rc.exe(3)
    深入探究VC —— 编译器cl.exe(2)
    深入探究VC —— 编译器cl.exe(1)
  • 原文地址:https://www.cnblogs.com/wgwyanfs/p/7375905.html
Copyright © 2011-2022 走看看