<!DOCTYPE html> <html lang="zh-CN">
<head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <title>Error Page</title> <style type="text/css"> @import url("https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap");
:root { --background-color: #000; --border-color : #7591AD; --text-color : #34495e; --color1 : #EC3E27; --color2 : #f01d67; --color3 : #1474bd; --color4 : #04ffcd; --color5 : #fdcb6e; --color6 : #e056fd; --color7 : #F97F51; --color8 : #BDC581; }
* { margin : 0; padding: 0; }
html { font-size: 14px; }
body { width : 100vw; height : 100vh; background-color: var(--background-color); display : flex; justify-content : center; align-items : center; font-family : 'Montserrat', sans-serif, Arial, 'Microsoft Yahei'; }
.channel { position : absolute; width : 80%; text-align : center; top : 50%; left : 50%; transform : translate(-45%, -200px); font-size : 30px; font-weight: bold; color : #fff; }
.box { width : 350px;
display : flex; justify-content: space-around; align-items : center;
transform-style: preserve-3d; }
.box p { position : relative; font-size : 100px; font-family : 'Bowlby One SC', Arial, Helvetica, sans-serif; color : #FFF; transform : scale(0.9, 1) rotateY(-45deg); transform-origin: bottom center; animation : animate 2.5s ease-in-out infinite; animation-delay: calc(var(--i) * 100ms); }
@keyframes animate { 20% { transform: scale(0.9, 1) rotateY(-45deg); text-shadow: 0 0 var(--color2), 0 0 var(--color3), 0 0 var(--color4); }
40% { transform: scale(0.9, 2) translateY(16px); text-shadow: -10px -2px var(--color2), -20px -3px var(--color3), -30px -4px var(--color4); }
60% { transform: scale(0.9, 1) rotateY(45deg); text-shadow: 0 0 var(--color2), 0 0 var(--color3), 0 0 var(--color4); }
80% { transform: scale(0.9, 2) translateY(16px); text-shadow: 10px -2px var(--color2), 20px -3px var(--color3), 30px -4px var(--color4); } } </style> </head>
<body> <H1>Error Page</H1>
<div class="channel"> TCT 呼叫程序猿大大 >﹏< </div>
<div class="container"> <div class="box"> <p style="--i:1">E</p> <p style="--i:2">R</p> <p style="--i:3">R</p> <p style="--i:4">O</p> <p style="--i:5">R</p> </div> </div>
<div> <div th:Utext="'<!--'" th:remove="tag"></div> <div th:utext="'Failed Request URL : ' + ${url}" th:remove="tag"></div> <div th:utext="'Expiration message : ' + ${exception.message}" th:remove="tag"></div> <ul th:remove="tag"> <li th:each="st : ${exception.stackTrace}" th:remove="tag"><span th:utext="${st}" th:remove="tag"></span><li> </ul> <div th:utext="'-->'" th:remove="tag"></div> </div> </body>
</html>
|