css 渐变动画以及demo1（自用）

渐变

渐变只能用于background-image，暂时没发现别的用处。

一、线性渐变

渐变的方向是线性的，一条直线，角度是可以变化的，可以填写渐变的方向，上下左右，也可以是角度。

需要注意的是颜色后面带百分数或者px会设置渐变的范围，写相同的数值，会直接直线分割，不会产生渐变柔和的效果。

1.语法：

background-image：linear-gradient(方向/±角度，颜色（百分数/px），颜色);

a. 方向： （颜色排在首位的，会出现写的方向第一个位置）

关键字 to + 方位

方位	释义	指向
left	从右向左	←
right	从左向右	→
top	从下到上	↑
bottom	从上到下	↓

a. 角度：

方位
90deg
180deg

2.demo展示

a.从右向左

就是你写的是left⬅，就是这样排列的，第一个#40E0D0颜色从右至左

background-image: linear-gradient(to left,#40E0D0, #98FB98);

b.从左向右

background-image: linear-gradient(to right,#40E0D0, #98FB98);

c.从下向上

background-image: linear-gradient(to top,#40E0D0, #98FB98);

d.从上向下

background-image: linear-gradient(to bottom,#40E0D0, #98FB98);

e.多方位

还可以设置多个方向或者角度，比如两个位置一起写left bottom。

background-image: linear-gradient(to left bottom,#40E0D0, #98FB98);

f.重复径向渐变

或者是一个重复的渐变效果

background-image: repeating-linear-gradient(to left bottom,#40E0D0 40px, #98FB98 60px);

二、径向渐变

径向就是以一个位置为起点发散的渐变形式，从中心像水波涟漪一样。

1.语法：

background-image:radial-gradient(shape(形状) size(渐变的大小，可以接收四个值) at position（位置），start-color，......,last-color )

a.shape(渐变形状)：

形状	释义
circle	圆形
ellipse	椭圆形 默认

b.size（渐变范围的大小）：

范围	释义
closest-side	渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。
closest-corner	渐变结束形状与容器距离渐变中心点最近的一个角相交。
farthest-side	类似于 closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。
farthest-corner (默认)	渐变的结束形状与容器距离渐变中心点最远的一个角相交。

c.poisition（渐变圆心的位置）：

位置	释义
center（默认）	设置中间为径向渐变圆心的纵坐标值。
top	设置顶部为径向渐变圆心的纵坐标值。
bottom	设置底部为径向渐变圆心的纵坐标值。

2.demo

a.基础径向渐变

background-image: radial-gradient(circle , #40E0D0, #98FB98);

b.控制范围的渐变

颜色后面的百分数用来控制渐变的范围

background-image: radial-gradient(circle , #40E0D0 , #98FB98 60%);

c.指定圆心的位置的渐变

关键字 + at + 位置

background-image: radial-gradient(circle farthest-corner at 40px 40px  , #40E0D0 , #98FB98 60%);

d.重复的指定位置的径向渐变

background-image: repeating-radial-gradient(circle farthest-corner at 40px 40px  , #40E0D0 , #98FB98 60%);

三、锥形渐变

创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮。

1.语法

background-image:conic-gradient(angle(开始旋转的线的角度),position（中心位置），start-color，...，last-color);

a.angle:

from +角度

角度
deg 角度
rad 弧度
turn 圈（一圈）
grad 梯度

b.position

at +像素

位置
两个百分数
两个px 中心点的坐标

2.demo

/* 基础的渐变*/
background: conic-gradient(red, orange, yellow, green, blue);

指定中心位置和方向的渐变

background: conic-gradient(
 from 0.25turn at 50% 30%,
 red,
 10deg,
 orange, yellow, green
);

棋盘格

background: conic-gradient(
   #fff 0.25turn,
   #000 0.25turn 0.5turn,
   #fff 0.5turn 0.75turn,
   #000 0.75turn
)
top left / 25% 25% repeat;
border: 1px solid;

动画

一、动画属性以及使用

animation写在需要作用的元素上面。配合keyframes来写动画。

animation: name（名字） duration（持续时间） timing-function（动画速度） delay（延迟） iteration-count（播放次数） direction（是否反向播放） fill-mode（播放完之后是否可见）;
 

@keyframes name（动画名字）{
 0% { 
 效果内容
 } 
 100% {
 效果内容
 }
}

这里的时间都是s（秒）

1.timing-function（动画速度）

value	释义
linear	匀速
ease	慢到快加速
ease-in	低速开始 剩下都是匀速
ease-out	低速结束 剩下都是匀速
ease-in-out	低速结束和开始，中间匀速
stpes	阶梯速度，顿点像打点计时器类似
cubic-bezier(n,n,n,n)	自定义模式，可以设置每个阶段的速度快慢

2.iteration-count（次数）

vaule	释义
n	指定次数
infinite	无限次，一直循环

3.direction（是否反向播放）

normal	不反向播放（默认值）
alternate	反向播放，来回

4.fill-mode（播放完之后是否可见）

value	释义
none	默认 ，回到最初状态
forwards	动画完成之后保持最后一帧的状态
backwards	动画延迟时间内才会生效
both	循环的动画不会起作用

后面两个属性是在不明白www.cnblogs.com/lyzg/p/5738… 这个网址讲的很好。

二、动画项目实战demo

1.负一屏展开缓冲动画，弹开最后消失

在小程序中的首页下拉不刷新，下拉展示动画，原理就是div的高度改变，最后定格在消失的一帧。

/*盒子的名字ash-box*/

 .ash-box {
     width: 100%;
     height: 0; 
     background-image: url(https://thirdpartimg.51ishare.com/chengsede.png);
     background-size: 100% 100%; 
     display: flex; 
     flex-direction: column;
     justify-content: center; 
     align-items: center;
     animation: myBox 1.5s infinite 0s;
     animation-iteration-count: 1;
     opacity: 0;
 }
 
 @keyframes myBox { 
     0% {
         opacity: 1; 
     } 
     50%{
         height: 160rpx;
         opacity: 1; 
     } 
     90% { 
         opacity: 1;
     } 
     100% { 
         opacity: 0; 
         height:0; 
     } 
 }

2.加载中loading动画

设置一个白色盒子，中间的橙色是图片，用transform使它旋转360deg，然后动画无线循环。

img {
 margin-bottom: 32rpx;
 width: 68rpx;
 height: 68rpx;
 animation: mycircles 2s linear infinite;
}

@keyframes mycircles {
 0% {
   transform: rotate(0deg);
 }

 100% {
   transform: rotate(360deg);
 }
}

渐变相关动画demo

1.渐变盒子和边框

a.彩色圆角盒子

<div class="test">linear gradient</div>

.test {
  font-size: 23px;
  color: #ffffff;
  //background-image: linear-gradient(115deg, #4fcf70, #fad648, #a767e5, #12bcfe, #44ce7b);
  background-image: linear-gradient(120deg, #FFC0CB, #DDA0DD, #9370DB, #6495ED, #40E0D0, #98FB98, #FFD700);
  width: 400px;
  height: 60px;
  border-radius: 10px;
  line-height: 60px;
  text-align: center;
  margin-left: 20px;
  margin-bottom: 20px;
}

b.斜切角渐变

<div class="test1">linear gradient</div>

 
.test1 {
  font-size: 23px;
  color: #ffffff;
  background-image: linear-gradient(
      -120deg, transparent 45px, #FFC0CB 45px, #9370DB, #40E0D0, #98FB98, #FFD700
  );
  width: 400px;
  height: 60px;
  border-radius: 10px;
  line-height: 60px;
  text-align: center;
  margin-left: 20px;
  margin-bottom: 20px;
}

c.渐变边框盒子

<div class="box1">
 <div class="back"></div>
   <div class="test2">linear gradient</div>
</div>

.test2 {
  font-size: 23px;
  color: #ffffff;
  background: black;
  width: 400px;
  height: 60px;
  border-radius: 10px;
  line-height: 60px;
  text-align: center;
  z-index: 2;
}

.box1 {
  width: 406px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-left: 20px;
  margin-bottom: 40px;
}

.back {
  position: absolute;
  z-index: 1;
  width: 1000px;
  height: 80px;
  background-image: linear-gradient(
      115deg, #ea5388 45px, #9370DB, #40E0D0, #98FB98, #FFD700
  );
  animation: move 1s linear 0s infinite;
  animation-direction: alternate;
}

@keyframes move {
  0% {
    transform: translateX(0);
**  **}
  100% {
    transform: translateX(-200px);
  }
}

c.渐变模糊边框盒子

涉及到css新的属性，filter滤镜。

filter语法

filter: 函数（值);

函数

函数	value	释义
url()	svg滤镜元素或者图片	填充图片
none		设置为none所有filter失效，多个函数存在，依次执行
blur()	5px/像素	高斯模糊，本例子中使用的就是此函数
brightness()	百分数/小数	0%是全黑图像，100%保持不变，大于100%更加明亮。其他值是该效果的线性成数。
contrast()	百分数/小数	对比度，0%灰色，100%不影响，超过则增强对比度。
drop-shadow()	（16px 16px 10px yellow）	轮廓阴影类似box-shadow
graycale()	百分数/小数	0无变化，100%转换为灰度图像。 网站变色可以用滤镜
hue-rotate()	角度/90deg	色相旋转，设定图像会被调整成色环角度颜色，0deg无变化。
invert()	百分数/小数	100%完全反转0无变化 色相反转，50%灰色。
opacity()	百分数/小数	透明度
saturate()	百分数/小数	饱和度
sepia()	百分数/小数	褐色滤镜 0-100

函数可以组合使用，写多个依次按照顺序执行。

css filter: contrast(175%) brightness(103%);

具体事例

<div class="test3">linear gradient
<div class="back1"></div>
</div>

.test3 {
  margin-left: 20px;
  font-size: 23px;
  color: #ffffff;
  background: black;
  width: 400px;
  height: 60px;
  border-radius: 10px;
  line-height: 60px;
  text-align: center;
  position: relative;
  margin-bottom: 30px;
}

.back1 {
  background-image: linear-gradient(
      115deg, #ea5388 45px, #9370DB, #40E0D0, #98FB98, #FFD700
  );
  width: 435px;
  height: 100px;
  position: absolute;
  left: -15px;
  top: -15px;
  animation: move1 2s linear 0s infinite;
  animation-direction: alternate;
  filter: blur(30px);
  z-index: -1;
}

@keyframes move1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

2.渐变字体

闪动字体的逻辑是给div一个彩色渐变的背景块，然后填充形式是text，字体的颜色设置为透明 五光十色闪烁字体是动画更加柔和的效果。重要是就是几个属性：background-clip、-webkit-text-fill-color

这里的# -webkit-，-moz-，-ms-，-o- ,因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius。

标志	释义
-webkit-	代表chrome、safari私有属性
-oz-	代表firefox浏览器私有属性
-ms-	代表IE浏览器私有属性
-o-	代表Operai私有属性

<div class="gray-text">闪动字体</div>
<div class="gray-text1">闪动字体</div>
<div class="gray-text4">五光十色闪烁字体</div> 

/*闪动字体*/
.gray-text {
 width: 300px;
 height: 100px;
 background-image: -webkit-linear-gradient(
     left,
     #66ffff 10%,
     #cc00ff 20%,
     blue 100%
 );
 animation: myFirst 1s infinite;/*动画设置 无数次*/
 background-clip: text;/*背景填充为text*/
 font-size: 30px;
 line-height: 100px;
 -webkit-text-fill-color: transparent;/*字体填充为透明颜色*/
 background-size: 200%;
 margin-left: 20px;
}

.gray-text1 {
 width: 150px;
 background-image: linear-gradient(to right, #00fd16, #eefd00, #08efd4);
 background-clip: text;
 font-size: 25px;
 -webkit-text-fill-color: transparent;
 animation: myFirst 1s infinite;
 background-size: 200%;
 margin-left: 20px;
 margin-bottom: 20px;
}

@keyframes myFirst {
 0% {
   background-position: 0;
 }
 100% {
   background-position: 200%;
 }
}
/*五光十色闪烁字体*/
.gray-text4 {
 width: 500px;
 font-size: 30px;
 margin-left: 20px;
 margin-bottom: 20px;
 background-image: linear-gradient(
     115deg, #ea5388 45px, #9370DB, #40E0D0, #98FB98, #FFD700
 );
 background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: textChange 1s linear 0s infinite;
}

@keyframes textChange {
 0% {
   filter: hue-rotate(0deg);
 }
 100% {
   filter: hue-rotate(360deg);
 }
}

3.渐变字体边框

我的想法效果不好，跟着别的jym写的最好还是使用svg

<div class="box">
 <div class="gray-text3">渐变边框</div>
 <div class="gray-text2">渐变边框</div>
</div>

.box {
 position: relative;
 margin-bottom: 100px;
 margin-left: 20px;
}

.gray-text2 {
 background-image: linear-gradient(90deg, #F27121, #E94057, #8A2387 60%);
 background-clip: text;
 font-size: 25px;
 -webkit-text-fill-color: transparent;
 position: absolute;
 z-index: 1;
 font-weight: 800;
 top: 0;
 left: 0;
}

.gray-text3 {
 color: black;
 position: absolute;
 z-index: 2;
 top: 0;
 font-size: 25px;
 left: 0;
}