线性渐变小练习

最新推荐文章于 2024-09-11 20:31:47 发布

freedom122198

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量132

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_47800094/article/details/115985402

版权

线性渐变小练习

线性渐变
为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度），还要定义终止色并且必须指定至少两种，当然也可以指定多种颜色去创建更复杂的渐变效果。

默认从上到下发生渐变
linear-gradient(skyblue,plum);
改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,skyblue,plum);
结束的方向：right、left、top、bottom
使用角度
linear-gradient(角度,skyblue,plum);
角度单位：deg
颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
重复渐变
repeating-linear-gradient(60deg,skyblue 0,plum 30%);

<!DOCTYPE html>
<html lang="en">
<head>
    <title>线性渐变小练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #wrap{
            width: 40px;
            height: 300px;
            border: solid 1px plum;
            margin: 100px auto;
            overflow: hidden;
        }
        #wrap > .inner{
            height: 600px;
            background: repeating-linear-gradient(45deg,skyblue 0px,skyblue 10px,rgba(226, 166, 226, 0.3) 10px,rgba(226, 166, 226, 0.3) 20px);
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner"></div>
    </div>
    <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";
        },10)
    </script>
</body>
</html>