zoukankan      html  css  js  c++  java
  • 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

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

    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . .*★*. .*★ *.*    ★ ★      * ★ .’ ‘*.    . ` . . ` . .
  • 相关阅读:
    day10 Python 形参顺序
    为oracle中的表格增加列和删除列
    为mapcontrol中的图层设置透明度
    最大的愿望 2007-05-10
    动心 2004年后半年
    写在十年 2007-09-15 (写给L之三)
    致vi老大 2011.1
    如潮 2011.2
    自然人——女孩思绪 (2006-09-14 08:21:51)
    朋友(2003年)
  • 原文地址:https://www.cnblogs.com/wushanbao/p/6863308.html
Copyright © 2011-2022 走看看