zoukankan      html  css  js  c++  java
  • 动画相关之线性渐变和径向渐变

    线性渐变

    线性渐变,表示两种颜色或多种颜色之间的平滑过渡。由渐变线和色标组成,渐变线控制渐变方向,色标控制颜色变化(包含一个颜色值和位置)。

    渐变线

    渐变线的起点和终点与渐变框一个角垂直线相交,且经过渐变框中心。

    渐变线

    1. 角度

    渐变线可以使用角度来指定方向,0deg表示沿着元素中心的Y轴从下到上,正直表示顺时针旋转。

    1. 关键字

    渐变线也可以使用关键字来指定方向,默认为to bottom

    to top 表示 0deg
    to right 表示 90deg
    to bottom 表示 180deg
    to left 表示 -90deg(或270deg)
    to top left 表示 -45deg(或315deg)
    to top right 表示 45deg
    to bottom left 表示 -135deg(或225deg)
    to bottom right 表示 135deg
    

    色标

    色标由颜色值和位置组成,每个线性渐变至少设置两个色标。

    1. 如果只有两个色标,可省略位置,将分别为0%和100%位置。
    // 等于linear-gradient(red 0%,blue 100%)
    linear-gradient(red,blue);
    
    1. 如果只有两个色标,且设置位置,则0%n%为第一种颜色,n%m%为第一种颜色到第二种颜色的过渡,m%~100%为第二种颜色。
    background-image: linear-gradient(red 20%,blue 80%);
    // 等价
    background-image: linear-gradient(red 0%,red 20%,blue 80%,blue 100%);
    
    1. 如果多个色标指定同一位置,处在中间的色标无效。
    background-image: linear-gradient(red 50%,white 50%,black 50%);
    // 等价
    background-image: linear-gradient(red, 50%,black 50%);
    
    1. 如果多个色标没有指定位置,则均匀分布。
    // 各占33.333%
    background-image: linear-gradient(red,green,blue);
    

    重复渐变

    重复渐变,表示重复线性渐变的效果,使色标在渐变线上无线重复。值得注意的是,只有首尾两个色标位置不在0%或100%时,重复渐变才生效。

    background-image: repeating-linear-gradient(red 20%,blue 50%);
    

    径向渐变

    径向渐变(Radial-gradient),指从椭圆中心点由内向外进行颜色渐变。由椭圆和色标组成,椭圆控制渐变位置、大小和形状,色标控制颜色变化(包含一个颜色和位置)。

    radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
    

    椭圆

    椭圆控制渐变形状、大小和位置。

    1. 形状

    椭圆形状(shape),可选择圆(Circle)椭圆(Ellipse),默认为Ellipse。

    1. 大小

    可使用关键字,百分比或长度单位。如果是圆,则表示半径;如果是椭圆,第一个值表示水平直径,第二只表示垂直直径;如果是关键字,如下所示:

    closest-side: 最近边
    closest-corner: 最近角
    farthest-side: 最远边
    farthest-side: 最远角
    
    1. 位置

    椭圆位置有多种表示方式,可通过关键字,百分比或长度来表示。

    // 关键字
    left right top bottom
    // 百分比:X轴百分比相对框的宽度,Y轴百分比相对于框的高度
    50% 60%
    // 长度:以左上角为0点进行定位
    

    色标

    色标由颜色值和位置组成,每个线性渐变至少设置两个色标。

    1. 如果只有两个色标,可省略位置,将分别为0%和100%位置。
    // 等于linear-gradient(red 0%,blue 100%)
    linear-gradient(red,blue);
    
    1. 如果只有两个色标,且设置位置,则0%n%为第一种颜色,n%m%为第一种颜色到第二种颜色的过渡,m%~100%为第二种颜色。
    background-image: radial-gradient(red 20%,blue 80%);
    // 等价
    background-image: radial-gradient(red 0%,red 20%,blue 80%,blue 100%);
    
    1. 如果多个色标指定同一位置,处在中间的色标无效。
    background-image: radial-gradient(red 50%,white 50%,black 50%);
    // 等价
    background-image: radial-gradient(red, 50%,black 50%);
    
    1. 如果多个色标没有指定位置,则均匀分布。
    // 各占33.333%
    background-image: radialr-gradient(red,green,blue);
    

    重复渐变

    重复渐变,表示重复线性渐变的效果,使色标在渐变线上无线重复。值得注意的是,只有首尾两个色标位置不在0%或100%时,重复渐变才生效。

    background-image: repeating-radial-gradient(red 20%,blue 80%);
    
  • 相关阅读:
    Working with WordprocessingML documents (Open XML SDK)
    How to Choose the Best Way to Pass Multiple Models in ASP.NET MVC
    Azure:Manage anonymous read access to containers and blobs
    Convert HTML to PDF with New Plugin
    location.replace() keeps the history under control
    On the nightmare that is JSON Dates. Plus, JSON.NET and ASP.NET Web API
    HTTP Modules versus ASP.NET MVC Action Filters
    解读ASP.NET 5 & MVC6系列(6):Middleware详解
    Content Negotiation in ASP.NET Web API
    Action Results in Web API 2
  • 原文地址:https://www.cnblogs.com/juetan/p/13301448.html
Copyright © 2011-2022 走看看