线性渐变

最新推荐文章于 2023-11-24 15:58:52 发布

一李

最新推荐文章于 2023-11-24 15:58:52 发布

阅读量406

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43641432/article/details/106599093

版权

前端专栏收录该内容

102 篇文章 1 订阅

订阅专栏

渐变是图片！

改变渐变的方向

从百分比（像素）的位置开始渐变

可以改变角度deg

透明度渐变--利用rgba使用透明度渐变

重复渐变repeating-linear-gradient

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width:200px;
            height:300px;
            border: 1px solid;
            margin: 0 auto;
            /* background-image: linear-gradient(to top,red,green,pink); */
            background-image: linear-gradient(-45deg,red 21%,green 40%,pink 10%);
            /* 从百分比的位置开始渐变 */
            background-image: linear-gradient(-45deg,red 21%,green 40%,pink 10%);
            /* 重复渐变 */
            background-image: repeating-linear-gradient(90deg,red 21%,green 40%,pink 10%);
        }
        
    </style>
</head>
<body>
    <!-- 渐变是图片类刑 -->
    <div class="wrap">

    </div>
</body>
</html>

发廊灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height:100%;
            overflow: hidden;
        }
        #wrap{
            width:40px;
            height:300px;
            margin:200px auto;
            border:1px solid;
            overflow: hidden;
        }
        #wrap > .inner{
            /* transition: 3s; */
            height:600px;
            background:repeating-linear-gradient(45deg,black 0px,black 10px,pink 10px ,pink 20px);
            
        }
        #wrap:hover .inner{
            /* margin-top: -300px; */
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="inner">

        </div>
    </div> 
    <script>
        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>   
</body>
</html>

光斑动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        html,body{
            height:100%;
            background-color: black;
            overflow: hidden;
            text-align: center;
        }
        h1{
            transition: 2.5s;
            margin-top: 50px;
            display: inline-block;
            font-size: 80px;
            color: rgba(255,255,255,0.3);
            font-family: "微软雅黑";
            font-weight: bold;
            background: linear-gradient(120deg,rgba(255,255,255,0) 120px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
            background-repeat: no-repeat;
            -webkit-background-clip: text;
        }
        /* h1:hover{
            background-position:600px 0 ;
        } */
    </style>
</head>
<body>
    <h1>LiHui-李晖-01</h1>
    <script>
        var h1 = document.querySelector("h1")
        var flag = -160;
        setInterval(function(){
            flag+=80;
            if(flag==600){
                flag = 0
            }
            h1.style.backgroundPosition = flag+"px"; 
        },30)
    </script>  
</body>
</html>

一李

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
线性渐变

渐变是图片！改变渐变的方向从百分比（像素）的位置开始渐变可以改变角度deg透明度渐变--利用rgba使用透明度渐变重复渐变repeating-linear-gradient<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
复制链接

扫一扫

专栏目录