CSS2 CSS3动画基础

CSS3

目录

CSS的版本问题

• 概念：可以设置标签的透明度，默认为1

• 语法

  1. 选择器{
  2. opacity:0~1之间的数字；
  3. }
  • 1完全不透明，0完全透明，其他半透明

• 特点

  • 包括文字和颜色在内的标签本身和子标签。
  • 支持动画

圆角

线性渐变

选择器{     background-image:linear-gradient(red,blue); }

• 线性渐变支持方向单词和角度

• 方向单词

  • to bottom:自上而下，默认
  • to top:从下往上
  • to right:从左往右
  • to left:从右往左
  • to left top: 从右下到左上
  • to left bottom: 从右上到左下
  • to right top:从左下到右上
  • to right bottom : 从左上到右下

• 角度

  

  • 语法

    选择器{     ///方向单词     background-image:linear-gradient(to right,red,blue);     /角度：45度     background-image:linear-gradient(45deg,red,blue); }

    色标

  • 概念；可以控制颜色在哪里开始渐变。

  • 语法

    选择器{     background-image:linear-gradient(to right,颜色1 色标1,颜色2 色标2,颜色3 色标3,颜色n 色标n); }

    例子：产生向左的不均匀渐变。红色到蓝色的渐变始于标签的30%宽度

  • 选择器{     background-image:linear-gradient(to left,red 30%,blue 100%); }

    重复的线性渐变

  • 概念：当渐变不达到100%时，可以实现重复渐变

  • 语法

    选择器{     background-image:repeating-linear-gradient(to right,颜色1 色标1,颜色2 色标2,颜色3 色标3,颜色n 色标n); }

    径向渐变

  • 概念：发散渐变与椭圆相似

  • 语法

    选择器{     background-image:radial-gradient(形状 at 圆心位置，颜色1 色标1,颜色2 色标2,颜色n 色标n); }

  • • 默认渐变位于标签的中心，即作为渐变的圆心
    • 色标是可选的，类似于线性渐变。

  • 例子：基本语法

  • 选择器{     background-image:radial-gradient(red,blue); }

• 形状

  • 设置渐变形状。
    • ellipse（椭圆）：默认
    • circle（圆）：形状为圆

• 圆心位置：控制发生径向渐变的中心位置

  选择器{
      //像素:距离左边30px，距离标签顶部100px
     background-image:radial-gradient(circle at  30px 100px,red,blue); 
      //单词
      //百分比：右上角
       background-image:radial-gradient(circle at  100% 0,red,blue); 
  }

• 具体px：分为x和y轴。指的是距离标签左边和标签的顶部有一定的像素。
  • 百分比：指的是x轴和y轴，参考标签的宽度和高度。默认是50% 50%
  • 单词：水平：left、center、right。 垂直：top、center、bottom
    • 比如正中心：center center。。 左上:left top

• 重复径向渐变

  • 概念：能够将色标没有到100%的渐变重复显示

  • 语法

    选择器{
        background-image:repeating-radial-gradient(形状 at 圆心位置，颜色1 色标位置，颜色2 色标位置);
    }

    倒影

  • 概念：实现盒子的镜像效果

  • 语法

    选择器{
        -webkit-box-reflect:镜像的方向 镜像与本体之间的距离 遮幕;
    }

    镜像的方向

    • right：在右边
    • left：在左边
    • below：在本体的下方
    • above：在本体的上方
    • 镜像与本体之间的距离。以px为单位
    • 遮幕：一般可以借助线性渐变实现水面效果

  • 例子

    选择器{
        -webkit-box-reflect:below 0px linear-gradient(transparent 70%,white);
    }

文字渐变

• 概念：将背景渐变作用于文字上

• 语法

  1. 选择器{
     -webkit-background-clip:text;
     }

• 流程

  • 先给标签设置背景渐变
  • 再设置文字渐变：-webkit-background-clip:text;
  • 设置文字为透明色