css3过渡图画转换

发布时间：2019-07-03 12:55:04编辑：auto阅读（1335）

    css3渐变
    线性渐变（Linear Gradient）- 向下/向上/向左/向右/对角方向
    径向渐变（Radial Gradient）- 由它们的中心定义
    repeating-linear-gradient() 函数用于重复线性渐变：
    线性渐变：linear-gradient：
    css3过渡图画转换
    径向渐变 radial-gradient ：

    css3过渡图画转换
    线性渐变 （默认从上向下）
    1、background: linear-gradient(red, blue); 基本的渐变，默认从上向下
    2、background: linear-gradient(to right, red , blue); 从左向右的渐变
    3、background: linear-gradient(to bottom right, red , blue);从左上角到右下角/
    4、background: linear-gradient(180deg, red, blue);带有指定角度的渐变
    5、background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));使用透明色渐变，
    transparent透明色/

    重复的线性渐变 background: repeating-linear-gradient(red, yellow 10%, green 20%);

    径向渐变
    1、background: radial-gradient(red, green, blue);颜色结点均匀分布的径向渐变：
    2、 background: radial-gradient(red 5%, green 15%, blue 60%); 颜色节点分布不均匀
    3、 background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复的径向渐变

    设置形状
    shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
    形状为圆形的径向渐变：
    background: radial-gradient(circle, red, yellow, green);

    css3中transform可以实现文字或图像的旋转（rotate）、缩放(scale)、倾斜(skew)、移动(translate)的变形效果。
     旋转、缩放、倾斜和移动，这四种变形效果进行结合使用，并且使用的先后顺序不同，页面显示的结果会有区别。
    使用语法：
    transform:功能;
    -ms-transform:功能; / IE 9 /
    -moz-transform:功能; / Firefox /
    -webkit-transform:功能; / Safari 和 Chrome /
    -o-transform:功能; / Opera /

关键字：

上一篇： 3 LNMP

下一篇： python中元组