halo-theme-dream2.0-plus
Version:
梦之城，童话梦境，动漫类型博客主题。
209 lines (189 loc) • 5.81 kB
HTML
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org"
th:fragment="error_fragment">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[[${error.status + ' - ' + #strings.defaultString(error.title, 'Internal server error')}]]</title>
<link rel="icon" th:href="${site.favicon}">
<style>
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
}
canvas {
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.caps {
z-index: 2;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
animation: as 8s linear infinite;
}
.caps img {
display: block;
width: 100%;
height: 100%;
}
@keyframes as {
0% {
opacity: 0;
}
10% {
opacity: .3;
}
20% {
opacity: .1;
}
30% {
opacity: .5;
}
40% {
opacity: 0;
}
50% {
opacity: .8;
}
55% {
opacity: 0;
}
55% {
opacity: 0;
}
}
.frame {
z-index: 3;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#e6000000', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.frame div {
position: absolute;
left: 0;
top: -20%;
width: 100%;
height: 20%;
background-color: rgba(0, 0, 0, .12);
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
animation: asd 12s linear infinite;
}
.frame div:nth-child(1) {
animation-delay: 0;
}
.frame div:nth-child(2) {
animation-delay: 4s;
}
.frame div:nth-child(3) {
animation-delay: 8s;
}
@keyframes asd {
0% {
top: -20%;
}
100% {
top: 100%;
}
}
h1 {
z-index: 3;
position: absolute;
font: bold 200px/200px Arial, sans-serif;
left: 50%;
top: 50%;
margin-top: -100px;
width: 100%;
margin-left: -50%;
height: 200px;
text-align: center;
color: transparent;
text-shadow: 0 0 30px rgba(0, 0, 0, .5);
animation: asdd 2s linear infinite;
}
@keyframes asdd {
0% {
text-shadow: 0 0 30px rgba(0, 0, 0, .5);
}
33% {
text-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
66% {
text-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
100% {
text-shadow: 0 0 40px rgba(0, 0, 0, .8);
}
}
</style>
<script>
var Application = (function () {
var canvas
var ctx
var imgData
var pix
var WIDTH
var HEIGHT
var flickerInterval
var init = function () {
canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d')
canvas.width = WIDTH = 700
canvas.height = HEIGHT = 500
ctx.fillStyle = 'white'
ctx.fillRect(0, 0, WIDTH, HEIGHT)
ctx.fill()
imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT)
pix = imgData.data
flickerInterval = setInterval(flickering, 30)
}
var flickering = function () {
for (var i = 0; i < pix.length; i += 4) {
var color = (Math.random() * 255) + 50
pix[i] = color
pix[i + 1] = color
pix[i + 2] = color
}
ctx.putImageData(imgData, 0, 0)
}
return {
init: init
}
}())
window.onload = function () {
// js source https://codepen.io/moklick/pen/zKleC
Application.init()
}
</script>
</head>
<body>
<h1>[[${error.status}]]</h1>
<div class="frame">
<div></div>
<div></div>
<div></div>
</div>
<div class="caps"></div>
<canvas id="canvas"></canvas>
</body>
</html>