html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSOSN</title>
<link rel="shortcut icon" href="../img/cat.ico">
<meta name="referrer" content="no-referrer">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1,maximum-scale=1">
<meta HTTP-EQUIV="pragma" content="no-cache">
<meta HTTP-EQUIV="Cache-Control" content="no-cache, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta HTTP-EQUIV="expires" content="0">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="apple-mobile-web-app-capable" content="yes"/>
</head>
<style>
*{
background: #000;
margin: 0;
padding: 0;
overflow:hidden;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
-ms-overflow-style: none;
}
/*动态渐变背景*/
.gradient {
/* 设置容器尺寸 - 原理1 */
width: 100vw;
height: 100vh;
/* 背景渐变色 - 原理2 */
background: linear-gradient(-45deg, #c45839, #c2396c, #359dc4, #34bd9c);
/* 背景尺寸 - 原理3 */
background-size: 600% 600%;
/* 循环动画 - 原理4 */
animation: gradientBG 10s ease infinite;
}
/* 动画，控制背景 background-position */
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
<body>
<!-- 容器 -->
<div class="gradient"></div>
</body>
</html>