css----7渐变

linear-gradient(90deg,red 10%,yellow 20%,green 30%)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                 600px;
                height: 200px;
                border: 1px solid;
                margin: 0 auto;
                /*background-image:linear-gradient(90deg,red 100px,yellow 110px) ;*/
                background-image:linear-gradient(90deg,rgba(0,0,0,1) 100px,rgba(0,0,0,1) 300px) ;
            }
        </style>
    </head>
    <body>
        <div id="test">
            
        </div>
    </body>
</html>

View Code

发廊灯

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            html,body{
                height: 100%;
                overflow: hidden;
            }
            
            #wrap{
                 40px;
                height: 300px;
                border: 1px solid;
                margin: 100px auto;
                overflow: hidden;
            }
            #wrap > .inner{
                height: 600px;
                background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="inner"></div>
        </div>
    </body>
    <script type="text/javascript">
        var inner = document.querySelector("#wrap > .inner");
        var flag =0;
        
        setInterval(function(){
            flag++;
            if(flag==300){
                flag=0;
            }
            inner.style.marginTop = -flag+"px";
        },1000/60)
        
    </script>
</html>

View Code

光斑动画

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            html,body{
                height: 100%;
                overflow: hidden;
                background: black;
                text-align: center;
            }
            
            h1{
                /*transition: 3s;*/
                margin-top: 50px;
                display: inline-block;
                color: rgba(255, 255, 255,.3);
                font:bold 80px "微软雅黑";
                background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
                background-repeat:no-repeat ;
                -webkit-background-clip: text ;
            }
            
            /*h1:hover{
                background-position: 500px 0;
            }*/
        </style>
    </head>
    <body>
        <h1>atguigu尚硅谷</h1>
    </body>
    <script type="text/javascript">
        var h1 = document.querySelector("h1");
        var flag =-160;
        
        setInterval(function(){
            flag+=10;
            if(flag==600){
                flag=-160;
            }
            h1.style.backgroundPosition = flag+"px";
        },30)
        
    </script>
</html>

View Code

径向渐变

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #test{
                 400px;
                height: 300px;
                border: 1px solid;
                margin: 0 auto;
                background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green 50%,pink) ;
            }
        </style>
    </head>
    <body>
        <div id="test">
            
        </div>
    </body>
</html>

View Code

相关阅读:
Animation
Calendar
ToggleButton
ASP.NET备份恢复SqlServer数据库
 ConfirmButton
DropDown
备份与恢复ACCESS数据库
 PopupControl
CascadingDropDown
RoundedCorners
原文地址：https://www.cnblogs.com/hack-ing/p/11765007.html