过渡动画 css3渐变

1. 过渡动画:是从一个状态渐渐过渡到另一个状态可以使我们的页面边得更加的好看,动感十足,低版本浏览器不支持这个属性不影响页面布局
经常和hover 一起搭配使用

/* 如果需要多个属性利用逗号隔开 */
        /* 过度属性花费的时间何时开始 */
       /* transition: width 1s 1s,height 1s 1s; */
       总写法: transition:all 1s;
2.css3渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向        (linear-gradient 线性渐变)
径向渐变（Radial Gradients）- 由它们的中心定义
      url('URL')   图像的URL
    none   无图像背景会显示。这是默认
    linear-gradient()   创建一个线0性渐变的 "图像"(从上到下)
    radial-gradient()   用径向渐变创建 "图像"。 (center to edges)
    repeating-linear-gradient()   创建重复的线性渐变 "图像"。
    repeating-radial-gradient()   创建重复的径向渐变 "图像"
    inherit   指定背景图像应该从父元素继承
语法:
      background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
      背景图像:线性渐变(方向，颜色停止1，颜色停止2，...);
   案例:
    线性渐变 - 从上到下
    顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色： up 向上 downwards 向下
    background-image: linear-gradient(#e66465, #9198e5);

线性渐变 - 从左到右
     从左边开始的线性渐变。起点是红色，慢慢过渡到黄色   (to right 向右 to left 向左)
      background-image: linear-gradient(to right, red , yellow);

    线性渐变 - 对角
    从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到黄色
    background-image: linear-gradient(to bottom right, red, yellow);

使用角度:如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向
（to bottom、to top、to right、to left、to bottom right，等等）。

background-image: linear-gradient(angle, color-stop1, color-stop2);

带有指定的角度的线性渐变： background-image: linear-gradient(-90deg, red, yellow);
    带有多个颜色节点的从上到下的线性渐变： background-image: linear-gradient(red, yellow, green);
    创建一个带有彩虹颜色和文本的线性渐变：标准的语法
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

3. 使用透明度（transparent）从左到右的线性渐变，带有透明度：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复的线性渐变 repeating 重复出现
repeating-linear-gradient() 函数用于重复线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 径向渐变
     径向渐变由它的中心定义。
    为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。
        默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
    语法:background-image: radial-gradient(shape size at position, start-color, ..., last-color);
      1.径向渐变 - 颜色节点均匀分布（默认情况下）
      background-image: radial-gradient(red, yellow, green);
      2.径向渐变 - 颜色节点不均匀分布
       background-image: radial-gradient(red 5%, yellow 15%, green 60%);
      3.设置形状
       shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
        background-image: radial-gradient(circle, red, yellow, green); 圆形渐变

4. 不同尺寸大小关键字的使用
    size 参数定义了渐变的大小。它可以是以下四个值：
      closest-side 最近侧最近端
      farthest-side 最远端
      closest-corner 最近角
      farthest-corner 最远角

带有不同尺寸大小关键字的径向渐变：
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);

重复的径向渐变
repeating-radial-gradient() 函数用于重复径向渐变：
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

举例说明:
      background: linear-gradient(red 10%, green 85%, blue 90%)
      其中：
        10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
        85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
        90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
        10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。
        比如这句：
        background: linear-gradient(red 0%, green 50%, blue 50%) 和 background: linear-gradient(red 0%, green 50%, blue 10%)

过渡动画 css3渐变相关推荐

09.CSS3渐变、过渡、转换、动画
CSS3渐变 (1).什么是渐变 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradi ...
CSS3渐变、过渡、转换、动画
1.CSS3渐变 (1).什么是渐变 CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用CSS3渐变(gradie ...
CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）...
一.阴影 1.1.文字阴影 text-shadow <length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的 ...
CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）...
目录一.阴影 1.1.文字阴影 1.2.盒子阴影二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点三.伪元素 3.1.before 3.2.after 3.3.清除浮动四.圆角与边框 ...
CSS(二)——Flex布局边框渐变过渡动画
学习CSS第二周的总结一. Flex布局容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位 ...
css3圆角360度转动画,target，框架集，css3过渡动画，css3圆角-阴影-透明度，运动曲线，图片文字遮罩，变形...
target 模拟后台服务器框架集 frameset和body不合,所以如果用frameset就不能有body标签利用框架可以把浏览器窗口划分为若干个区域,每个区域就是一个框架,在其中分别显示不 ...
25个CSS3 渐变和动画效果教程
2019独角兽企业重金招聘Python工程师标准>>> 随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站 ...
CSS3过渡动画关键帧动画
一.过渡动画过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
CSS3新选择器，盒子模型，过渡动画transition，2D转换transform
关于css属性选择器常用的有: id选择器(#box),选择id为box的元素类选择器(.one),选择类名为one的所有元素标签选择器(div),选择标签为div的所有元素后代选择器(#box ...

过渡动画 css3渐变

过渡动画 css3渐变相关推荐

最新文章

热门文章