div 圆角div渐变色渐变色循环换色

最新推荐文章于 2024-03-05 17:26:49 发布

霍先生的虚拟宇宙网络

最新推荐文章于 2024-03-05 17:26:49 发布

阅读量508

点赞数 1

分类专栏：前端文章标签： html css javascript border圆角 border渐变色

本文链接：https://blog.csdn.net/u010919083/article/details/129146920

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

先看下效果是个动态gif图，注意观察：态

看到了吧。圆圈div 边框颜色在不停的自动变色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
    <style rel="stylesheet">
        #showMenu{
            width: 500px;
            height: 400px;
            margin: auto;
            border: 8px solid;
            border-image: linear-gradient(45deg, gold, deeppink) 1;
            clip-path: inset(0px round 10px);
            animation: huerotate 6s infinite linear;
            filter: hue-rotate(360deg);
        }
        @keyframes huerotate {
            0% {
                filter: hue-rotate(0deg);
            }
            100% {
                filter: hue-rorate(360deg);
            }
        }
        #showMenu ul li{
            padding: 5px;
            list-style: none;
        }

        /*    border: 2px solid cadetblue;*/
        /*    border-image: linear-gradient(to right, #8f41e9, #578aef) 3;*/
        /*    border-radius: 12px;*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    margin: auto;*/
        /*}*/
    </style>
</head>
<body>

<div id="showMenu">
    <h1>OK,RUNING!</h1>
    <ul>
        <li><a href="sensordata.html">1. 查看实时数据</a></li>
        <li><a href="setOffLineData.html">2. 离线数据设置</a></li>
    </ul>

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