反转图层（渐变）

mgcdm

于 2025-03-02 22:21:54 发布

阅读量96

点赞数 3

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/mgcdm/article/details/145971696

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变旋转</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .test1{
            height: 975px;
            width: 1707px;
            background-image: linear-gradient(red,green);
            /* position: absolute;
            top: 0px;
            left: 0px; */
        }
        .test2{
            height: 975px;
            width: 1707px;
            background-image: linear-gradient(green,rgb(251, 0, 0));
        }
        
    </style>

</head>
<body>
    <div class="test1" onclick="change()"></div>
    <!-- <button onclick="change()" class="a"></button> -->
</body>
</html>
<script>
    var test1 = document.getElementsByClassName("test1")[0];
    function change(){
        if(test1.getAttribute("class")=="test2"){
            test1.setAttribute("class","test1")
        }else{
            test1.setAttribute("class","test2")
        }
    }
</script>