• css 过渡和 变形


    一、过渡(transition)


    transition-property: 指定具有过渡效果的CSS样式属性名
    1.默认值: all
    2.仅具有中间值(CSS样式值是数值的)的CSS样式具有过渡效果
    3.可以具体指定那些样式具有过渡效果,多个CSS样式属性名使用 , 分割

    transition-duration: 设置过渡持续的时间
    1. s 或者 ms 必须是正值
    2. 默认值 0s

    transition-delay: 设置过渡的延迟执行时间
    1. 默认值 0s
    2. 如果是正值,表示在延迟指定的时间后执行过渡效果
    3. 如果是负值,表示立即达到指定之间过渡的结果后再执行过渡。

    transition-timing-function: 三次贝塞尔曲线函数

    控制过的效果(CSS值得变换速度)

    默认值:
    ease: 慢进慢出
    linear: 匀速

    简写:
    transition: CSS样式属性名 过渡时间 过渡效果 过渡延迟时间 (CSS样式属性名 过渡时间 过渡延迟时间 过渡效果 )

    注意事项:
    样式覆盖问题

    1.如果后面的样式 持续时间+延迟时间 大于0,后面的样式覆盖前面的。
    2.如果后面的样式 持续时间+延迟时间 等于0

    Chrome 57 以下
    -- 前面的样式生效

    Chrome 58 以上
    -- 后面的样式覆盖前面的。

    3.如果后面的样式 持续时间+延迟时间 小于0,前面的样式生效

    二、变形(transform)

    变形函数的特点
    1、只有非inline元素才能设置变形。
    2、内容和后代元素同步变形
    3、不会对兄弟元素的位置产生影响。
    4、不会造成父元素大小的改变。


    1.缩放
    scale(x, y)
    scaleX(length)
    scaleY(length)
    2.倾斜,斜切
    skew(x, y)
    skewX(angle)
    skewY(angle)
    3.位移
    translate(x, y);
    translateX(length);
    translateY(length);
    4.旋转
    rotate(angle)

    变形的中心点
    transform-origin: x y

    函数综合使用
    -- 第一个函数的坐标系改变(放大,倾斜,旋转,位移)会影响后续的函数

    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . ` . .
  • 相关阅读:
    Table交替行变色 鼠标经过变色 单击变色
    编程专用字体(雅黑字体+Consolas)
    Enterprise Architect学习笔记-EA中关系
    通用分页存储过程
    解决vs2008无法切换设计视图
    盒子模式
    ASP.NET界面数据绑定大大杂烩
    Tyvj P1032 Begin2 Unit1 身份验证
    NOIP2010普及组T1
    TyvjBegin P1036 Begin2 Unit1 数独验证
  • 原文地址:https://www.cnblogs.com/wushanbao/p/6863308.html
Copyright © 2020-2023  润新知