CSS3----新增UI样式----线性渐变 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .test{
                width: 600px;
                height: 200px;
                border: 1px solid;
                margin: 0 auto;
                /* background-image: linear-gradient(to right,red,green,yellow,#bfa); */
                /* background-image: linear-gradient(90deg,red 10%,green 20%,yellow 30%,#bfa); */
                /* background-image: linear-gradient(90deg,rgba(0,0,0,0) 100px,rgba(167,178,222,1) 500px); */
                /*重复渐变*/
                background-image:repeating-linear-gradient(90deg,rgba(0,0,0,0),rgba(167,178,222,1) 300px);
                
            }
            /* .test:hover{
                transform: rotate(360deg);
            } */
        </style>
    </head>
    <body>
        <div class="test">
            
        </div>
    </body>
</html>

background-image属性中的linear-gradient属性值

　参数：其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

repeating-linear-gradient（） 重复渐变

 

发廊灯练习

<!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{
                width: 40px;
                height: 300px;
                border: 1px solid;
                margin: 100px auto;
                overflow: hidden;
            }
            .wrap > .inner{
                transition: 5s;
                height: 600px;
                background: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
            }
            .wrap:hover .inner{
                margin-top:-300px ;
                
            }
        </style>
    </head>
    <body>
        <div class="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>

 

 

光斑动画

 

<!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: 50px 0 0 0;
                color: rgba(255,255,255,.3);
                font:bold 80px “微软雅黑;
                display: inline-block;
                background: linear-gradient(120deg,rgba(255,255,255,0) 100px,rgba(255,255,255,1) 180px,rgba(255,255,255,0) 270px);
                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>

径向渐变

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .test{
                width: 600px;
                height: 400px;
                border: 1px solid;
                margin: 0 auto;            
                /* background-image:radial-gradient(#bfa,red,yellow); */　　　　　　　　　　
       　　　　　　/*最近边*/
                /* background-image:radial-gradient(circle, #bfa,red 50%,yellow); */                
　　　　　　　　　　　/*最近边*/　　　　　　　　　　　　　　
　　　　　　　　　　/* background-image:radial-gradient(closest-side circle,#bfa,red 50%,yellow); */
　　　　　　　　　　　/*最远边*/

                /* background-image:radial-gradient(farthest-side circle,#bfa,red 50%,yellow); */
　　　　　　　　　　　/*最近角*/

                /* background-image:radial-gradient(closest-corner circle at 100px 100px,#bfa,red 50%,yellow); */
　　　　　　　　　　/*最远角*/

                background-image:radial-gradient(farthest-corner circle at 100px 100px,#bfa,red 50%,yellow);
                
            }
            
        </style>
    </head>
    <body>
        <div class="test">
            
        </div>
    </body>
</html>

background-image：radial-gradient

circle at 100px 100px 修改圆心位置
posted @ 2021-07-16 10:58  2237774566  阅读(56)  评论(0)    收藏  举报