CSS3使用clip-path实现带闪屏效果的500错误页面

h5, css3, template, error

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2275
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-color: #000;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.glitch {
    position: relative;
    margin-top: auto;
    font-size: 6rem;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    background: #000;
}
.glitch::before {
    left: 3px;
    text-shadow: 3px 0 #67FF2C;
    animation: glitch-effect 3s infinite linear alternate-reverse;
}
.glitch::after {
    left: -3px;
    text-shadow: -3px 0 #FF2C5E;
    animation: glitch-effect 2s infinite linear alternate-reverse;
}
@-webkit-keyframes glitch-effect {
    0% {
        -webkit-clip-path: inset(17% 0 85% 0);
        clip-path: inset(17% 0 85% 0);
    }
    2% {
        -webkit-clip-path: inset(43% 0 82% 0);
        clip-path: inset(43% 0 82% 0);
    }
    4% {
        -webkit-clip-path: inset(61% 0 68% 0);
        clip-path: inset(61% 0 68% 0);
    }
    6% {
        -webkit-clip-path: inset(37% 0 47% 0);
        clip-path: inset(37% 0 47% 0);
    }
    8% {
        -webkit-clip-path: inset(28% 0 45% 0);
        clip-path: inset(28% 0 45% 0);
    }
    10% {
        -webkit-clip-path: inset(90% 0 41% 0);
        clip-path: inset(90% 0 41% 0);
    }
    12% {
        -webkit-clip-path: inset(98% 0 20% 0);
        clip-path: inset(98% 0 20% 0);
    }
    14% {
        -webkit-clip-path: inset(84% 0 75% 0);
        clip-path: inset(84% 0 75% 0);
    }
    16% {
        -webkit-clip-path: inset(56% 0 92% 0);
        clip-path: inset(56% 0 92% 0);
    }
    18% {
        -webkit-clip-path: inset(63% 0 31% 0);
        clip-path: inset(63% 0 31% 0);
    }
    20% {
        -webkit-clip-path: inset(35% 0 100% 0);
        clip-path: inset(35% 0 100% 0);
    }
    22% {
        -webkit-clip-path: inset(92% 0 64% 0);
        clip-path: inset(92% 0 64% 0);
    }
    24% {
        -webkit-clip-path: inset(29% 0 73% 0);
        clip-path: inset(29% 0 73% 0);
    }
    26% {
        -webkit-clip-path: inset(78% 0 80% 0);
        clip-path: inset(78% 0 80% 0);
    }
    28% {
        -webkit-clip-path: inset(30% 0 44% 0);
        clip-path: inset(30% 0 44% 0);
    }
    30% {
        -webkit-clip-path: inset(15% 0 85% 0);
        clip-path: inset(15% 0 85% 0);
    }
    32% {
        -webkit-clip-path: inset(41% 0 70% 0);
        clip-path: inset(41% 0 70% 0);
    }
    34% {
        -webkit-clip-path: inset(14% 0 3% 0);
        clip-path: inset(14% 0 3% 0);
    }
    36% {
        -webkit-clip-path: inset(44% 0 26% 0);
        clip-path: inset(44% 0 26% 0);
    }
    38% {
        -webkit-clip-path: inset(51% 0 98% 0);
        clip-path: inset(51% 0 98% 0);
    }
    40% {
        -webkit-clip-path: inset(68% 0 64% 0);
        clip-path: inset(68% 0 64% 0);
    }
    42% {
        -webkit-clip-path: inset(80% 0 87% 0);
        clip-path: inset(80% 0 87% 0);
    }
    44% {
        -webkit-clip-path: inset(75% 0 68% 0);
        clip-path: inset(75% 0 68% 0);
    }
    46% {
        -webkit-clip-path: inset(36% 0 68% 0);
        clip-path: inset(36% 0 68% 0);
    }
    48% {
        -webkit-clip-path: inset(30% 0 98% 0);
        clip-path: inset(30% 0 98% 0);
    }
    50% {
        -webkit-clip-path: inset(35% 0 7% 0);
        clip-path: inset(35% 0 7% 0);
    }
    52% {
        -webkit-clip-path: inset(20% 0 85% 0);
        clip-path: inset(20% 0 85% 0);
    }
    54% {
        -webkit-clip-path: inset(53% 0 53% 0);
        clip-path: inset(53% 0 53% 0);
    }
    56% {
        -webkit-clip-path: inset(85% 0 26% 0);
        clip-path: inset(85% 0 26% 0);
    }
    58% {
        -webkit-clip-path: inset(64% 0 30% 0);
        clip-path: inset(64% 0 30% 0);
    }
    60% {
        -webkit-clip-path: inset(5% 0 32% 0);
        clip-path: inset(5% 0 32% 0);
    }
    62% {
        -webkit-clip-path: inset(5% 0 98% 0);
        clip-path: inset(5% 0 98% 0);
    }
    64% {
        -webkit-clip-path: inset(17% 0 71% 0);
        clip-path: inset(17% 0 71% 0);
    }
    66% {
        -webkit-clip-path: inset(24% 0 78% 0);
        clip-path: inset(24% 0 78% 0);
    }
    68% {
        -webkit-clip-path: inset(53% 0 28% 0);
        clip-path: inset(53% 0 28% 0);
    }
    70% {
        -webkit-clip-path: inset(60% 0 84% 0);
        clip-path: inset(60% 0 84% 0);
    }
    72% {
        -webkit-clip-path: inset(3% 0 35% 0);
        clip-path: inset(3% 0 35% 0);
    }
    74% {
        -webkit-clip-path: inset(61% 0 17% 0);
        clip-path: inset(61% 0 17% 0);
    }
    76% {
        -webkit-clip-path: inset(45% 0 86% 0);
        clip-path: inset(45% 0 86% 0);
    }
    78% {
        -webkit-clip-path: inset(82% 0 88% 0);
        clip-path: inset(82% 0 88% 0);
    }
    80% {
        -webkit-clip-path: inset(39% 0 21% 0);
        clip-path: inset(39% 0 21% 0);
    }
    82% {
        -webkit-clip-path: inset(75% 0 89% 0);
        clip-path: inset(75% 0 89% 0);
    }
    84% {
        -webkit-clip-path: inset(93% 0 75% 0);
        clip-path: inset(93% 0 75% 0);
    }
    86% {
        -webkit-clip-path: inset(90% 0 1% 0);
        clip-path: inset(90% 0 1% 0);
    }
    88% {
        -webkit-clip-path: inset(36% 0 98% 0);
        clip-path: inset(36% 0 98% 0);
    }
    90% {
        -webkit-clip-path: inset(5% 0 33% 0);
        clip-path: inset(5% 0 33% 0);
    }
    92% {
        -webkit-clip-path: inset(1% 0 56% 0);
        clip-path: inset(1% 0 56% 0);
    }
    94% {
        -webkit-clip-path: inset(33% 0 10% 0);
        clip-path: inset(33% 0 10% 0);
    }
    96% {
        -webkit-clip-path: inset(20% 0 98% 0);
        clip-path: inset(20% 0 98% 0);
    }
    98% {
        -webkit-clip-path: inset(50% 0 58% 0);
        clip-path: inset(50% 0 58% 0);
    }
    100% {
        -webkit-clip-path: inset(88% 0 24% 0);
        clip-path: inset(88% 0 24% 0);
    }
}
@keyframes glitch-effect {
    0% {
        -webkit-clip-path: inset(17% 0 85% 0);
        clip-path: inset(17% 0 85% 0);
    }
    2% {
        -webkit-clip-path: inset(43% 0 82% 0);
        clip-path: inset(43% 0 82% 0);
    }
    4% {
        -webkit-clip-path: inset(61% 0 68% 0);
        clip-path: inset(61% 0 68% 0);
    }
    6% {
        -webkit-clip-path: inset(37% 0 47% 0);
        clip-path: inset(37% 0 47% 0);
    }
    8% {
        -webkit-clip-path: inset(28% 0 45% 0);
        clip-path: inset(28% 0 45% 0);
    }
    10% {
        -webkit-clip-path: inset(90% 0 41% 0);
        clip-path: inset(90% 0 41% 0);
    }
    12% {
        -webkit-clip-path: inset(98% 0 20% 0);
        clip-path: inset(98% 0 20% 0);
    }
    14% {
        -webkit-clip-path: inset(84% 0 75% 0);
        clip-path: inset(84% 0 75% 0);
    }
    16% {
        -webkit-clip-path: inset(56% 0 92% 0);
        clip-path: inset(56% 0 92% 0);
    }
    18% {
        -webkit-clip-path: inset(63% 0 31% 0);
        clip-path: inset(63% 0 31% 0);
    }
    20% {
        -webkit-clip-path: inset(35% 0 100% 0);
        clip-path: inset(35% 0 100% 0);
    }
    22% {
        -webkit-clip-path: inset(92% 0 64% 0);
        clip-path: inset(92% 0 64% 0);
    }
    24% {
        -webkit-clip-path: inset(29% 0 73% 0);
        clip-path: inset(29% 0 73% 0);
    }
    26% {
        -webkit-clip-path: inset(78% 0 80% 0);
        clip-path: inset(78% 0 80% 0);
    }
    28% {
        -webkit-clip-path: inset(30% 0 44% 0);
        clip-path: inset(30% 0 44% 0);
    }
    30% {
        -webkit-clip-path: inset(15% 0 85% 0);
        clip-path: inset(15% 0 85% 0);
    }
    32% {
        -webkit-clip-path: inset(41% 0 70% 0);
        clip-path: inset(41% 0 70% 0);
    }
    34% {
        -webkit-clip-path: inset(14% 0 3% 0);
        clip-path: inset(14% 0 3% 0);
    }
    36% {
        -webkit-clip-path: inset(44% 0 26% 0);
        clip-path: inset(44% 0 26% 0);
    }
    38% {
        -webkit-clip-path: inset(51% 0 98% 0);
        clip-path: inset(51% 0 98% 0);
    }
    40% {
        -webkit-clip-path: inset(68% 0 64% 0);
        clip-path: inset(68% 0 64% 0);
    }
    42% {
        -webkit-clip-path: inset(80% 0 87% 0);
        clip-path: inset(80% 0 87% 0);
    }
    44% {
        -webkit-clip-path: inset(75% 0 68% 0);
        clip-path: inset(75% 0 68% 0);
    }
    46% {
        -webkit-clip-path: inset(36% 0 68% 0);
        clip-path: inset(36% 0 68% 0);
    }
    48% {
        -webkit-clip-path: inset(30% 0 98% 0);
        clip-path: inset(30% 0 98% 0);
    }
    50% {
        -webkit-clip-path: inset(35% 0 7% 0);
        clip-path: inset(35% 0 7% 0);
    }
    52% {
        -webkit-clip-path: inset(20% 0 85% 0);
        clip-path: inset(20% 0 85% 0);
    }
    54% {
        -webkit-clip-path: inset(53% 0 53% 0);
        clip-path: inset(53% 0 53% 0);
    }
    56% {
        -webkit-clip-path: inset(85% 0 26% 0);
        clip-path: inset(85% 0 26% 0);
    }
    58% {
        -webkit-clip-path: inset(64% 0 30% 0);
        clip-path: inset(64% 0 30% 0);
    }
    60% {
        -webkit-clip-path: inset(5% 0 32% 0);
        clip-path: inset(5% 0 32% 0);
    }
    62% {
        -webkit-clip-path: inset(5% 0 98% 0);
        clip-path: inset(5% 0 98% 0);
    }
    64% {
        -webkit-clip-path: inset(17% 0 71% 0);
        clip-path: inset(17% 0 71% 0);
    }
    66% {
        -webkit-clip-path: inset(24% 0 78% 0);
        clip-path: inset(24% 0 78% 0);
    }
    68% {
        -webkit-clip-path: inset(53% 0 28% 0);
        clip-path: inset(53% 0 28% 0);
    }
    70% {
        -webkit-clip-path: inset(60% 0 84% 0);
        clip-path: inset(60% 0 84% 0);
    }
    72% {
        -webkit-clip-path: inset(3% 0 35% 0);
        clip-path: inset(3% 0 35% 0);
    }
    74% {
        -webkit-clip-path: inset(61% 0 17% 0);
        clip-path: inset(61% 0 17% 0);
    }
    76% {
        -webkit-clip-path: inset(45% 0 86% 0);
        clip-path: inset(45% 0 86% 0);
    }
    78% {
        -webkit-clip-path: inset(82% 0 88% 0);
        clip-path: inset(82% 0 88% 0);
    }
    80% {
        -webkit-clip-path: inset(39% 0 21% 0);
        clip-path: inset(39% 0 21% 0);
    }
    82% {
        -webkit-clip-path: inset(75% 0 89% 0);
        clip-path: inset(75% 0 89% 0);
    }
    84% {
        -webkit-clip-path: inset(93% 0 75% 0);
        clip-path: inset(93% 0 75% 0);
    }
    86% {
        -webkit-clip-path: inset(90% 0 1% 0);
        clip-path: inset(90% 0 1% 0);
    }
    88% {
        -webkit-clip-path: inset(36% 0 98% 0);
        clip-path: inset(36% 0 98% 0);
    }
    90% {
        -webkit-clip-path: inset(5% 0 33% 0);
        clip-path: inset(5% 0 33% 0);
    }
    92% {
        -webkit-clip-path: inset(1% 0 56% 0);
        clip-path: inset(1% 0 56% 0);
    }
    94% {
        -webkit-clip-path: inset(33% 0 10% 0);
        clip-path: inset(33% 0 10% 0);
    }
    96% {
        -webkit-clip-path: inset(20% 0 98% 0);
        clip-path: inset(20% 0 98% 0);
    }
    98% {
        -webkit-clip-path: inset(50% 0 58% 0);
        clip-path: inset(50% 0 58% 0);
    }
    100% {
        -webkit-clip-path: inset(88% 0 24% 0);
        clip-path: inset(88% 0 24% 0);
    }
}
h2 {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 300;
}
small,
a {
    margin: auto auto 1rem auto;
    color: rgba(255, 255, 255, 0.4);
}

HTML

h5, css3, template, error

编辑器支持Emmet

快捷键

h5, css3, template, error

使用CSS3 clip-path实现的页面布局文本特效

使用CSS3 clip-path实现的标题文本水纹波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：