• 2D变形


    CSS3所提供的动画功能主要包括变形、转换和动画技术。变形是最基本的动画形式,它主要通过CSS控制元素样式属性值的变化来实现。利用transform功能来实现文字或图像的旋转、缩放、倾斜和移动这4种类型的变形处理。

    transform实现了一些可用SVG实现的变形功能,transform属性的基本语法如下所示:

    transformnone|<transform-function>[<transform-function>];

    transform-function设置变形函数:matrix()scale()translate()totate()skew()

    rotate(<angle>)函数用法

    scale()函数能够缩放元素大小,语法格式:scale(<number>);number参数值可以是正数、负数和小数。

    translate()函数能够重新定位元素的坐标,语法格式如下:translate(<translation-value>);

    skew()函数能够让元素倾斜显示,会改变元素的形状,语法格式如下:skew(<angle>);

    matrix()是矩阵函数,调用该函数可以非常灵活地实现各种变形效果。语法格式如下:

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

    CSS变形的原点默认为对象的中心点,如果要改变这个中心点,可以使用transform-origin属性进行定义。transform-origin属性的初始值为“50% 50%,适用于块状元素和內联元素,transform-origin接受两个参数,可以是百分比、empx等具体的值,也可以是leftcenterright,或者topmiddlebottom等描述性关键字。

    CSStransformationCSS transition是两种不同的动画模型。

    transition属性是一个复合属性,可以同时定义transition-propertytransitiondurationtransition-timing-functiontransition-delaytransition-propertytransition-durationtransition-timing-functiontransition-delay子属性值。

    transition-property属性用来定义转换动画的CSS属性名称。

    transition-duration属性用来定义转换动画的时间长度,即设置从旧属性换到新属性花费的时间,单位为秒。

    transition-delay属性用来定义过渡动画的延迟时间。

    transition-timing-function属性用来定义过渡动画的效果,初始值为ease

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

    animation属性是一个复合属性,它包含了animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-direction子属性值。

    animation-name属性可以定义CSS动画的名称,初始值为none

    animation-duration属性定义CSS动画的播放时间,初始值为0

    animation-timing-function属性定义CSS动画的播放方式,初始值为ease

    animation-delay属性可以定义CSS动画延迟播放时间,初始值为0

    animation-iteration-count属性定义CSS动画的播放次数,初始值为1infinite表示无限次。

    animation-direction属性定义CSS动画的播放方向,初始值为normal,另一个值为alternate

  • 相关阅读:
    【抓包】Charles设置断点
    获取绑定到DataGridView中某一行的数据
    持续集成经验分享Bamboo+Ant+SVN的构建方案
    JIRA.HOME locked被锁的解决方案
    JIRA使用说明
    jira 4.2 使用Oracle数据库的详细安装(含破解)
    Linux + JIRA4.2 + MySQL安装&破解&配置攻略
    EXECUTE IMMEDIATE oracle介绍
    园子里的哪位大哥给我说说WinCE程序的开发,谢谢了
    PL/SQL DEVELOPER中的专用复制(Special Copy)
  • 原文地址:https://www.cnblogs.com/liuling608/p/6804049.html
Copyright © 2020-2023  润新知