css实现彩色渐变柱子伸长动画效果代码-html代码-BFW代码库

css实现彩色渐变柱子伸长动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现彩色渐变柱子伸长动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body
{
  background-color:#030434;
  overflow:hidden;
}

.box
{
height: 360px;
    width: 9%;
    float: left;
    margin-left: 1%;
      margin-top: 5%;
    margin-bottom: 5%;
      border-radius: 4px;
}

.text-decoration
{
      text-align: center;
    color: #dadada;
    letter-spacing: 9px;
    font-family: monospace;
    padding-top: 35px;
}

.gradiant1
{
  background-image: linear-gradient(to bottom, #f8e739, #f1d42d, #eac222, #e1b019, #d89e10);

}

.gradiant2
{
  background-image: linear-gradient(to bottom, #d89e10, #e28f00, #ec7f00, #f66b00, #ff5200);

}

.gradiant3
{
  background-image: linear-gradient(to bottom, #ff5200, #f84603, #f13806, #e92909, #e2130b);
}

.gradiant4
{
  background-image: linear-gradient(to bottom, #e2130b, #e1110c, #e00f0d, #df0c0d, #de090e);
}

.gradiant5
{
  background-image: linear-gradient(to bottom, #de090e, #df002a, #dc003e, #d60051, #ce0061);
}

.gradiant6
{
background-image: linear-gradient(to bottom, #ce0061, #d50079, #d60094, #d000b3, #c115d4);
 
}

.gradiant7
{
  background-image: linear-gradient(to bottom, #c115d4, #af0cd6, #9b07d8, #8508da, #6a0ddc);
}

.gradiant8
{
  background-image: linear-gradient(to bottom, #6a0ddc, #5f0ddd, #530edd, #450fde, #3210de);
  -webkit-
}

.gradiant9
{
 background-image: linear-gradient(to bottom, #3210de, #2a1cdc, #2124d9, #172ad7, #0c2fd4);
  
}

.gradiant10
{
background-image: linear-gradient(to bottom, #0c2fd4, #00.........完整代码请登录后点击上方下载按钮下载查看