mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
增加异常模板处理
This commit is contained in:
Anyon
parent
970edecac0
commit
ae9b846015
@ -9,7 +9,7 @@ if (!function_exists('parse_padding')) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!function_exists('parse_class')) {
|
if (!function_exists('parse_class')) {
|
||||||
function parse_class($name)
|
function parse_class($name): string
|
||||||
{
|
{
|
||||||
$names = explode('\\', $name);
|
$names = explode('\\', $name);
|
||||||
return '<abbr title="' . $name . '">' . end($names) . '</abbr>';
|
return '<abbr title="' . $name . '">' . end($names) . '</abbr>';
|
||||||
@ -17,14 +17,14 @@ if (!function_exists('parse_class')) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!function_exists('parse_file')) {
|
if (!function_exists('parse_file')) {
|
||||||
function parse_file($file, $line)
|
function parse_file($file, $line): string
|
||||||
{
|
{
|
||||||
return '<a class="toggle" title="' . "{$file} line {$line}" . '">' . basename($file) . " line {$line}" . '</a>';
|
return '<a class="toggle" title="' . "{$file} line {$line}" . '">' . basename($file) . " line {$line}" . '</a>';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!function_exists('parse_args')) {
|
if (!function_exists('parse_args')) {
|
||||||
function parse_args($args)
|
function parse_args($args): string
|
||||||
{
|
{
|
||||||
$result = [];
|
$result = [];
|
||||||
foreach ($args as $key => $item) {
|
foreach ($args as $key => $item) {
|
||||||
@ -386,7 +386,9 @@ if (!function_exists('echo_value')) {
|
|||||||
</div>
|
</div>
|
||||||
<?php if (!empty($trace['source'])) { ?>
|
<?php if (!empty($trace['source'])) { ?>
|
||||||
<div class="source-code">
|
<div class="source-code">
|
||||||
<pre class="prettyprint lang-php"><ol start="<?php echo $trace['source']['first']; ?>"><?php foreach ((array)$trace['source']['source'] as $key => $value) { ?><li class="line-<?php echo " {$index}-" . ($key + $trace['source']['first']) . ($trace['line'] === $key + $trace['source']['first'] ? ' line-error' : ''); ?>"><code><?php echo htmlentities($value); ?></code></li><?php } ?></ol></pre>
|
<pre class="prettyprint lang-php">
|
||||||
|
<ol start="<?php echo $trace['source']['first']; ?>"><!--<?php foreach ((array)$trace['source']['source'] as $key => $value) { ?>--><li class="line-<?php echo " {$index}-" . ($key + $trace['source']['first']) . ($trace['line'] === $key + $trace['source']['first'] ? ' line-error' : ''); ?>"><code><?php echo htmlentities($value); ?></code></li><!--<?php } ?>--></ol>
|
||||||
|
</pre>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
<div class="trace">
|
<div class="trace">
|
||||||
@ -468,7 +470,6 @@ if (!function_exists('echo_value')) {
|
|||||||
<script>
|
<script>
|
||||||
function $(selector, node) {
|
function $(selector, node) {
|
||||||
var elements;
|
var elements;
|
||||||
|
|
||||||
node = node || document;
|
node = node || document;
|
||||||
if (document.querySelectorAll) {
|
if (document.querySelectorAll) {
|
||||||
elements = node.querySelectorAll(selector);
|
elements = node.querySelectorAll(selector);
|
||||||
@ -16,29 +16,36 @@
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
// 应用命名空间
|
// 应用命名空间
|
||||||
'app_namespace' => '',
|
'app_namespace' => '',
|
||||||
// 应用快速访问
|
// 应用快速访问
|
||||||
'app_express' => true,
|
'app_express' => true,
|
||||||
// 是否启用路由
|
// 是否启用路由
|
||||||
'with_route' => true,
|
'with_route' => true,
|
||||||
// 超级用户账号
|
// 超级用户账号
|
||||||
'super_user' => 'admin',
|
'super_user' => 'admin',
|
||||||
// 默认时区
|
// 默认时区
|
||||||
'default_timezone' => 'Asia/Shanghai',
|
'default_timezone' => 'Asia/Shanghai',
|
||||||
// 应用映射（自动多应用模式有效）
|
// 应用映射（自动多应用模式有效）
|
||||||
'app_map' => [],
|
'app_map' => [],
|
||||||
// 域名绑定（自动多应用模式有效）
|
// 域名绑定（自动多应用模式有效）
|
||||||
'domain_bind' => [],
|
'domain_bind' => [],
|
||||||
// 禁止URL访问的应用列表（自动多应用模式有效）
|
// 禁止URL访问的应用列表（自动多应用模式有效）
|
||||||
'deny_app_list' => [],
|
'deny_app_list' => [],
|
||||||
// 非调试模式时显示错误的消息
|
// 非调试模式时显示错误的消息
|
||||||
'error_message' => '页面错误！请稍后再试～',
|
'error_message' => '页面错误！请稍后再试～',
|
||||||
// CORS 自动配置跨域
|
// CORS 自动配置跨域
|
||||||
'cors_auto' => true,
|
'cors_auto' => true,
|
||||||
// CORS 配置跨域域名
|
// CORS 配置跨域域名
|
||||||
'cors_host' => [],
|
'cors_host' => [],
|
||||||
// CORS 授权请求方法
|
// CORS 授权请求方法
|
||||||
'cors_methods' => 'GET,PUT,POST,PATCH,DELETE',
|
'cors_methods' => 'GET,PUT,POST,PATCH,DELETE',
|
||||||
// CORS 跨域头部字段
|
// CORS 跨域头部字段
|
||||||
'cors_headers' => 'Api-Type,Api-Name,Api-Uuid,Api-Token,User-Form-Token,User-Token,Token',
|
'cors_headers' => 'Api-Type,Api-Name,Api-Uuid,Api-Token,User-Form-Token,User-Token,Token',
|
||||||
|
// 异常模板路径配置
|
||||||
|
'exception_tmpl' => app()->getAppPath() . 'admin/view/error.php',
|
||||||
|
// 异常状态模板配置，非开发模式有效
|
||||||
|
'http_exception_template' => [
|
||||||
|
404 => app()->getRootPath() . 'public/static/theme/err/404.html',
|
||||||
|
500 => app()->getRootPath() . 'public/static/theme/err/500.html'
|
||||||
|
]
|
||||||
];
|
];
|
||||||
21
public/static/theme/err/404.html
Normal file
21
public/static/theme/err/404.html
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<title>该页面不存在</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||||
|
<link rel="stylesheet" type="text/css" href="__ROOT__/static/theme/err/404/reset.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="__ROOT__/static/theme/err/404/style.css">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.6">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="system">
|
||||||
|
<img alt="404" src="__ROOT__/static/theme/err/404/404.png">
|
||||||
|
<div class="title">
|
||||||
|
<h2>页面走丢了...</h2>
|
||||||
|
<h4>远方的朋友你好！非常抱歉，您所请求的页面不存在！</h4>
|
||||||
|
<h4>请仔细检查您输入的网址是否正确。</h4>
|
||||||
|
<p><a style="color:#00F7DE;font-size:18px" href="{:url('@index')}">回到首页</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/static/theme/err/404/404.png
Normal file
BIN
public/static/theme/err/404/404.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
225
public/static/theme/err/404/reset.css
Normal file
225
public/static/theme/err/404/reset.css
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
* {
|
||||||
|
word-wrap: break-word
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset {
|
||||||
|
color: #666;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol, dl {
|
||||||
|
list-style-type: none
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
*position: static
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
address, caption, cite, code, dfn, em, th, var {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, textarea, select, optgroup, option {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
font-weight: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button {
|
||||||
|
overflow: visible;
|
||||||
|
vertical-align: middle;
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
body, th, td, button, input, select, textarea {
|
||||||
|
font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
|
||||||
|
font-size: 12px;
|
||||||
|
color: #333;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
line-height: 1.6;
|
||||||
|
background: #7395ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-size: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, area {
|
||||||
|
outline: none;
|
||||||
|
blr: expression(this.onFocus=this.blur())
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a.ie6:hover {
|
||||||
|
zoom: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
a:focus {
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover, a:active {
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus {
|
||||||
|
outline: none
|
||||||
|
}
|
||||||
|
|
||||||
|
sub, sup {
|
||||||
|
vertical-align: baseline
|
||||||
|
}
|
||||||
|
|
||||||
|
button, input[type="button"], input[type="submit"] {
|
||||||
|
line-height: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*img*/
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
a img, img {
|
||||||
|
-ms-interpolation-mode: bicubic
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-responsive {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.clears {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*IE下a:hover 背景闪烁*/
|
||||||
|
* html {
|
||||||
|
overflow: -moz-scrollbars-vertical;
|
||||||
|
zoom: expression(function(ele) {ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
/*HTML5 reset*/
|
||||||
|
header, footer, section, aside, details, menu, article, section, nav, address, hgroup, figure, figcaption, legend {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
display: inline
|
||||||
|
}
|
||||||
|
|
||||||
|
audio, canvas, video {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 21px;
|
||||||
|
line-height: 40px;
|
||||||
|
border: 0;
|
||||||
|
border-bottom: 1px solid #e5e5e5
|
||||||
|
}
|
||||||
|
|
||||||
|
legend small {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #999
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
margin: 0 2px;
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
/* 1 */
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box;
|
||||||
|
/* 2 */
|
||||||
|
box-sizing: content-box
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Name:style_clearfix
|
||||||
|
Example:class="clearfix|cl"
|
||||||
|
Explain:Clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
|
||||||
|
*/
|
||||||
|
.cl:after, .clearfix:after {
|
||||||
|
content: ".";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.cl, .clearfix {
|
||||||
|
zoom: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*a {
|
||||||
|
transition: all 0.6s ease;
|
||||||
|
-webkit-transition: all 0.6s ease;
|
||||||
|
-moz-transition: all 0.6s ease;
|
||||||
|
-ms-transition: all 0.6s ease;
|
||||||
|
}*/
|
||||||
|
|
||||||
45
public/static/theme/err/404/style.css
Normal file
45
public/static/theme/err/404/style.css
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system {
|
||||||
|
text-align: center;
|
||||||
|
margin: -20% auto 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system img {
|
||||||
|
text-align: center;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h2 {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title h4 {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
19
public/static/theme/err/500.html
Normal file
19
public/static/theme/err/500.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh">
|
||||||
|
<head>
|
||||||
|
<title>系统发生错误</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||||
|
<link rel="stylesheet" href="__ROOT__/static/theme/err/404/reset.css">
|
||||||
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400|Oswald:600'>
|
||||||
|
<link rel="stylesheet" href="__ROOT__/static/theme/err/500/style.css">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.6">
|
||||||
|
</head>
|
||||||
|
<body style="padding-bottom:10%">
|
||||||
|
<div id="error"><?php echo htmlentities($message??'Error'); ?></div>
|
||||||
|
<div class="error-num">500
|
||||||
|
<div class="error-num__clip">500</div>
|
||||||
|
</div>
|
||||||
|
<p id="desc">咦，系统似乎出问题了。</p>
|
||||||
|
<p><a style="color:#00F7DE;font-size:28px" href="{:url('@index')}" target="_blank">回到首页</a></p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
144
public/static/theme/err/500/style.css
Normal file
144
public/static/theme/err/500/style.css
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
:root {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: rgba(255, 255, 255, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
background: #2e3b64;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
#error {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.075em;
|
||||||
|
color: #C94D4D;
|
||||||
|
-webkit-animation: pulse 4s infinite alternate;
|
||||||
|
animation: pulse 4s infinite alternate;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes pulse {
|
||||||
|
from {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
from {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#error::before {
|
||||||
|
content: "";
|
||||||
|
width: 0.75rem;
|
||||||
|
height: 50vh;
|
||||||
|
margin-bottom: 0.75em;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 100%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#desc {
|
||||||
|
color: #64acd2;
|
||||||
|
margin: 2em 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-num, .error-num__clip, .error-num__clip-left, .error-num__clip-left::before, .error-num__clip::before {
|
||||||
|
position: relative;
|
||||||
|
font-size: 10rem;
|
||||||
|
font-family: "Oswald";
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
color: white;
|
||||||
|
-webkit-animation: colorSplit 1.25s steps(2, end) infinite;
|
||||||
|
animation: colorSplit 1.25s steps(2, end) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes colorSplit {
|
||||||
|
25% {
|
||||||
|
text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colorSplit {
|
||||||
|
25% {
|
||||||
|
text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
|
||||||
|
}
|
||||||
|
75% {
|
||||||
|
text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-num__clip, .error-num__clip-left, .error-num__clip-left::before, .error-num__clip::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -2px;
|
||||||
|
z-index: 10;
|
||||||
|
color: #333;
|
||||||
|
overflow: visible;
|
||||||
|
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%, 100% 80%, 100% 85%, 0 85%, 0% 0%);
|
||||||
|
clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%, 100% 80%, 100% 85%, 0 85%, 0% 0%);
|
||||||
|
-webkit-animation: glitch 1s steps(2, start) infinite;
|
||||||
|
animation: glitch 1s steps(2, start) infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes glitch {
|
||||||
|
30% {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glitch {
|
||||||
|
30% {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-num__clip::before, .error-num__clip-left::before {
|
||||||
|
content: "500";
|
||||||
|
left: 0.05em;
|
||||||
|
color: white;
|
||||||
|
z-index: 9;
|
||||||
|
-webkit-clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%, 100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%, 100% 79%, 100% 86%, 0 86%, 0% 0%);
|
||||||
|
clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%, 100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%, 100% 79%, 100% 86%, 0 86%, 0% 0%);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user