前端基础知识学习---CSS3学习（八）线性渐变

最新推荐文章于 2024-05-09 20:59:01 发布

四川码匠

最新推荐文章于 2024-05-09 20:59:01 发布

阅读量240

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/qq_27922023/article/details/81056756

版权

CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

`线性渐变`

双颜色值的线性渐变

background-image:linear-gradient(red,blue);

多颜色值的线性渐变

background-image:linear-gradient(red,blue,pink,black);

改变渐变方向

background-image:linear-gradient(to top left,red,blue);

使用角度

background-image:linear-gradient(0deg,red,blue);

控制颜色节点的分布

background-image:linear-gradient(90deg,red 10%,orange 15%,yellow 20%,green 30%,blue 50%,indigo 70%,violet 80%);

透明度的渐变

background-image:linear-gradient(90deg,rgba(255,0,0,0) 50%,rgba(255,0,0,0.5),rgba(255,0,0,1) 60%);

重复渐变

background: repeating-linear-gradient(90deg,red 10%,blue 30%);

渐变实例-发廊灯

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            #warp{
                height: 300px;
                width: 40px;
                border: 1px solid;
                margin: 100px auto;
                overflow: hidden;
            }
            #warp > .inner{
                height: 600px;/*这是是颜色所在的高度。远比能看见的要高*/
                background: repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
            }
            #warp:hover .inner{
                margin-top: -300px;
            }

        </style>
    </head>
    <body>
        <div id="warp">
            <div class="inner"></div>
        </div>
    </body>
    <script type="text/javascript">
        var inner  = document.querySelector("#warp > .inner");/*获取元素*/
        var flag = 0;/*循环结束后归零*/
        setInterval(function(){
            flag++;
            if(flag == 300){
                flag = 0;
            }
            inner.style.marginTop = -flag+"px";

        },1000/60)/*设置定时器循环*/
    </script>
</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的display: inline-block;属性让h1这个元素居中*/
            }
            h1{
                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;
            }
        </style>
    </head>
    <body>
        <h1>码酱博客-专注与总结分享</h1>
    </body>
    <script type="text/javascript">
        var h1  = document.querySelector("h1");/*获取元素*/
        var flag = -160;/*循环结束后归零*/
        setInterval(function(){
            flag+=10;
            if(flag == 900){
                flag = -160;
            }
            h1.style.backgroundPosition = flag+"px";

        },30)/*设置定时器循环*/
    </script>
</html>

四川码匠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识学习---CSS3学习（八）线性渐变

线性渐变双颜色值的线性渐变background-image:linear-gradient(red,blue);多颜色值的线性渐变background-image:linear-gradient(red,blue,pink,black);改变渐变方向background-image:linear-gradient(to top left,red,blue);...
复制链接

扫一扫

专栏目录