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(t.........完整代码请登录后点击上方下载按钮下载查看