CSS3渐变进度条效果 ​

CSS3渐变进度条效果

1.html代码如下：

    <section class="container">

        <div class="loading-bar"></div>

    </section>

    <h1>CSS3渐变进度条效果</h1>

2.css样式

背景色黑色，背景色动画渐变时常5s

body{

            background-color: #333;

            animation: body-animate 5s linear infinite;

        }

3.设置CSS3渐变进度条效果字体样式效果

     body h1{

            width: 100%;

            text-align: center;

            color: #fff;

            text-transform: uppercase;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 3em;

            letter-spacing: 3px;

        }

4.设置进度条外矩形块的样式和位置

      .container{

            width: 50%;

            background-color: #fff;

            margin: 280px auto 100px;

            padding: 20px 40px;

            border-radius: 4px;

            box-shadow: 0 10px 20px rgba(0,0,0,0.5);

        }

        .container .loading-bar{

            display: inline-block;

            width: 100%;

            height: 10px;

            background-color: #f1f1f1;

            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            border-radius: 5px;

            overflow: hidden;

            position: relative;

        }

5.设置进度条显示效果

     .container .loading-bar::after{

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            border-radius: 5px;

            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            animation: load-animate 5s linear infinite;

        }

6.整个效果分为三步我们先让它快起来,再让它慢起来,设置背景色渐变,红色-黄色-深黄色

         

        @keyframes load-animate{

            0%{

                width: 0%;

                background-color: #ff6369;

            }

            70%{

                width: 70%;

                background-color: #ffe669;

            }

            100%{

                width: 100%;

                background-color: #d6e663;

            }

        }

7.给body标签添加动画效果,实现背景渐变的效果背景颜色,随着滚动条的颜色进行改变,滚动条颜色变化,背景颜色跟随变化.

同步使用关键帧动画，并且时间要保持一致 

        @keyframes body-animate{

            0%{

                background-color: #ff6369;

            }

            70%{

                background-color: #ffe669;

            }

            100%{

                background-color: #d6e663;

            }

        }

完整CSS代码如下：

     <style>

        *{

            margin: 0;

            padding: 0;

        }

        html,body{

            width: 100%;

            height: 100%;

        }

        body{

            background-color: #333;

            animation: body-animate 5s linear infinite;

        }

        body h1{

            width: 100%;

            text-align: center;

            color: #fff;

            text-transform: uppercase;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 3em;

            letter-spacing: 3px;

        }

        .container{

            width: 50%;

            background-color: #fff;

            margin: 280px auto 100px;

            padding: 20px 40px;

            border-radius: 4px;

            box-shadow: 0 10px 20px rgba(0,0,0,0.5);

        }

        .container .loading-bar{

            display: inline-block;

            width: 100%;

            height: 10px;

            background-color: #f1f1f1;

            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            border-radius: 5px;

            overflow: hidden;

            position: relative;

        }

        .container .loading-bar::after{

            content: '';

            position: absolute;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            border-radius: 5px;

            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

            animation: load-animate 5s linear infinite;

        }

        @keyframes load-animate{

            0%{

                width: 0%;

                background-color: #ff6369;

            }

            70%{

                width: 70%;

                background-color: #ffe669;

            }

            100%{

                width: 100%;

                background-color: #d6e663;

            }

        }

        @keyframes body-animate{

            0%{

                background-color: #ff6369;

            }

            70%{

                background-color: #ffe669;

            }

            100%{

                background-color: #d6e663;

            }

        }

    </style>