2022-12-21T16:16:11.png

背景图，头像，超链接文字颜色都是随机的

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1,viewport-fit=cover">
    <title>名称</title>
<meta name="keywords" content="关键字">
<meta name="baidu-site-verification" content="code-AkdFbbKntN" />
<meta name="robots" content="index,follow">
    <link rel="shortcut icon" href="https://a.xn--xu0a.cn/nt" >
    <meta name="description" content="简介">
   <base target="_blank">
   <style>
      body {
           overflow-x:hidden;
    background-repeat: unset;
background-attachment:fixed;
background-image: url("https://xn--xu0a.cn/api/sj");
  background-size: 100%;
      }
    @media only screen and (min-width: 768px) {
      body { 
background-image: url("https://xn--xu0a.cn/api/dn");}
      }
    }


    a {font-weight: 700;    text-decoration: none;
        color: #ffffff;text-decoration: none;
    }

    h1,p {
        font-weight: 600;
        line-height: 1.5;
        margin: 0 0 1rem 0;
        letter-spacing: 0.2rem;
    text-align: center;
    margin-top: 20%;
    background-image: -webkit-linear-gradient(left, #e9a5a5, #b8c1c0 10%, #65c0e0 20%, #aea2db 30%, #81c1d9 40%, #e9a5a5 50%, #b8c1c0 60%, #65c0e0 70%, #aea2db 80%, #81c1d9 90%, #e9a5a5);
    color: transparent;

    /* 将背景裁剪为文字 */
    -webkit-background-clip: text;

    /* 背景放大一倍，动画才有移动的空间 */
    background-size: 50% 100%;

    /* 动画 规定四秒执行完 无限循环 匀速播放 */
    animation: a 5s infinite linear;
}



h1:hover {
    color: DeepSkyBlue;
}
    

p:hover {
    color: DeepSkyBlue;
}

ul {
    list-style: disc;
    margin: 0 0 2rem 0;
    padding-left: 0;
}

#wrapper {
    display: -moz-flex;
    display: -ms-flex;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -moz-align-items: center;
    -ms-align-items: center;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    position: relative;
    z-index: 3;
    top: 20vh;
}

#header {
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    text-align: center;


    }


        #header > :first-child {
            margin-top: 0;
        }

            #header > :first-child:before {
                display: none;
            }

        #header .logo {
            width: 5.5rem;
            height: 5.5rem;
            line-height: 5.5rem;
            border: solid 1px #ffffff;
            border-radius: 100%;
        }

            #header .logo :before {
                font-size: 2rem;
            }


            #header .content .inner {
                padding: 3rem 2rem;
            }

                #header .content .inner > :last-child {
                    margin-bottom: 0;
                }

        

        #header nav ul {
            display: flex;
            margin-bottom: 0;
            list-style: none;
            border: solid 1px #ffffff;
        }

            #header nav ul li {
                padding-left: 0;
                border-left: solid 1px #ffffff;
            }

                #header nav ul li:first-child {
                    border-left: 0;
                }

                #header nav ul li a {
                    display: block;
                    min-width: 7.5rem;
                    height: 2.75rem;
                    line-height: 2.75rem;
                    padding: 0 1.25rem 0 1.45rem;
                    letter-spacing: 0.2rem;
                    font-size: 0.8rem;
                    border-bottom: 0;
                }



@keyframes a {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}


        @media screen and (max-width: 1525px) {
#wrapper{top: 0;}

            #header {
                padding: 1.5rem 0;
            }

                #header .content .inner {
                    padding: 2.5rem 0;
                }

                #header nav ul {
                    -moz-flex-direction: column;
                    -webkit-flex-direction: column;
                    -ms-flex-direction: column;
                    flex-direction: column;
                    min-width: 10rem;
                    max-width: 100%;
                }

                    #header nav ul li {
                        border-left: 0;
                        border-top: solid 1px #ffffff;
                    }

                        #header nav ul li:first-child {
                            border-top: 0;
                        }

                    

        #header nav ul li a {
    height: 2rem;
    min-width: 0;
    line-height: 35px;
}

        }

  
   a:visited {color:#00ffc8;}
   
      a:hover {
     background-color:#fff;
   }



    </style>
</head>

<body>
    <div id="wrapper">
        <header id="header">
            <div class="content">
                <div class="inner">
                      <img src="https://a.xn--xu0a.cn/mt" class="logo">
                    <h1 style="font-size: 2em;">标题</h1>
                    <p style="font-size: 1.2em;">副标题</p>
                </div>
            </div>
            <nav class="use-middle">
                <ul>
                    <li><a href="#">链接1</a></li>
                      <li><a href="#">链接2</a></li>
               
                </ul>
            </nav>
        </header>
       
</div>
 
<script type="text/javascript" charset="utf-8">
    var obj = document.getElementsByTagName("a");
for(i=0;i<obj.length;i++)
{
var str = "0123456789abcdef";
var t = "#";
for(j=0;j<6;j++)
{t = t+ str.charAt(Math.random()*str.length);}
obj[i].style.color=t; 
}
</script>
</body>

</html>