css3 線性漸變和徑向漸變

時間 2019-12-14
標籤 css3 css 線性漸變徑向欄目 CSS 简体版
原文原文鏈接
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>線性漸變和徑向漸變</title>
        <style type="text/css">
            #dd{
                width: 500px;
                height: 200px;
                /*線性漸變*/
                background-image: linear-gradient(red,yellow);
            }
            #dd1{
                width: 500px;
                height: 200px;
                /*方向線性漸變*/
                background-image: linear-gradient(to top right,red,yellow);
            }
            #dd2{
                width: 500px;
                height: 200px;
                /*角度線性漸變*/
                background-image: linear-gradient(45deg,red,yellow);
            }
            #dd3{
                width: 500px;
                height: 200px;
                /*多種顏色等比例漸變*/
                background-image: linear-gradient(to bottom right,red 0%,yellow 30%, orange 60%,green 100%);
            }
            #dd4{
                width: 500px;
                height: 200px;
                /*徑向漸變*/
                background-image: radial-gradient(green,blue);
            }
            #dd5{
                width: 500px;
                height: 200px;
                /*橢圓徑向漸變*/
                background-image: radial-gradient(ellipse,red,yellow);
            }
            #dd6{
                width: 500px;
                height: 200px;
                /*圓形可設置大小的徑向漸變*/
                background-image: radial-gradient(circle 100px,#000,#ff0000);
            }
            #dd7{
                width: 500px;
                height: 200px;
                /*重複的徑向漸變*/
                background-image:repeating-radial-gradient(circle 50px,#000,#ff0000);
            }
            /* 文字漸變 */
            .text-gradient {  
                display: inline-block;
                font-family: '微軟雅黑';
                font-size: 10em;
                position: relative; 
            }  
              
            .text-gradient[data-text]::after {  
                content: attr(data-text);  
                color: #FBEE00;  
                position: absolute;  
                left: 0;  
                z-index: 2;
                -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#FBEE00), to(rgba(251,246,147,.6)));
            }
        </style>
    </head>
    <body>
        <h1>線性漸變</h1>
        <div id="dd">
            線性漸變
        </div>
        <div id="dd1">
            方向線性漸變
        </div>
        <div id="dd2">
            角度線性漸變
        </div>
        <div id="dd3">
            多種顏色等比例漸變
        </div>
        <h1>徑向漸變</h1>
        <div id="dd4">
            兩種顏色徑向漸變
        </div>
        <div id="dd5">
            橢圓徑向漸變
        </div>
        <div id="dd6">
            圓形可設置大小的徑向漸變
        </div>
        <div id="dd7">
            重複的徑向漸變
        </div>
        <h2 class="text-gradient" data-text="文字漸變">文字漸變</h2> 
    </body>
</html>
<script>
    var dd = document.getElementById("dd7");
    var xd = 50;
    setInterval(function(){
        xd+=5;
        if(xd>=100){
            xd=50;
        }
        dd.style.backgroundImage='repeating-radial-gradient(circle '+xd+'px,red,yellow)';
    },100);
</script>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。