SVG 逃离者404错误动效页面

点击GO HOME按钮会有轻微颤动效果。

SVG, CSS3

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
*:focus {
    outline: none !important;
}
body,
html {
    height: 100%;
}
body {
    background: #121214;
}
main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
main > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
}
main > div:nth-child(1) {
    opacity: 0;
    -webkit-transform: translateZ(1000px);
    transform: translateZ(1000px);
    -webkit-animation: zoomFadeIn 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation: zoomFadeIn 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}
main > div:nth-child(1) .error-1-e {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-animation: slideRight 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
    animation: slideRight 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
}
main > div:nth-child(1) .error-2-r {
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
    -webkit-animation: slideDown 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
    animation: slideDown 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
}
main > div:nth-child(1) .error-4-o {
    -webkit-transform: translateX(10%);
    transform: translateX(10%);
    -webkit-animation: slideLeftSmall 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -300ms forwards;
    animation: slideLeftSmall 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -300ms forwards;
}
main > div:nth-child(1) .error-5-r {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-animation: slideLeft 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
    animation: slideLeft 3000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
}
main > div:nth-child(1) .error-2-0 {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    -webkit-animation: slideUp 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
    animation: slideUp 5000ms cubic-bezier(0.215, 0.61, 0.355, 1) -500ms forwards;
}
main > div:nth-child(1) .error-top {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3000ms forwards;
    animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3000ms forwards;
}
main > div:nth-child(1) .error-left {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3500ms forwards;
    animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3500ms forwards;
}
main > div:nth-child(1) .error-right {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3500ms forwards;
    animation: scaleXIn 750ms cubic-bezier(0.19, 1, 0.22, 1) 3500ms forwards;
}
main > div:nth-child(2) .quote-top,
main > div:nth-child(2) .quote-bottom {
    opacity: 0;
    -webkit-animation: slideUpFadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 5500ms forwards;
    animation: slideUpFadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 5500ms forwards;
}
main > div:nth-child(2) .quote-bottom {
    -webkit-animation-delay: 5750ms;
    animation-delay: 5750ms;
}
main > div:nth-child(3) .link-phrase,
main > div:nth-child(3) .link-mark {
    opacity: 0;
    -webkit-animation: slideUpFadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 6250ms forwards;
    animation: slideUpFadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 6250ms forwards;
}
main > div:nth-child(3) .link-mark {
    opacity: 0;
    -webkit-animation: fadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 6750ms forwards;
    animation: fadeIn 1000ms cubic-bezier(0.215, 0.61, 0.355, 1) 6750ms forwards;
}
main > div:nth-child(3) a {
    cursor: pointer;
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
main > div:nth-child(3) a .top use {
    -webkit-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}
main > div:nth-child(3) a:hover,
main > div:nth-child(3) a:focus {
    -webkit-animation: jitter 450ms ease-in-out forwards;
    animation: jitter 450ms ease-in-out forwards;
}
main > div:nth-child(3) a:hover .top use,
main > div:nth-child(3) a:focus .top use {
    fill: white;
}
main > div:nth-child(3) a:active .top use {
    fill: #b30000;
}
@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes slideDown {
    0% {
        -webkit-transform: translateY(-20%);
        transform: translateY(-20%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(20%);
        transform: translateY(20%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes slideUp {
    0% {
        -webkit-transform: translateY(20%);
        transform: translateY(20%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes slideRight {
    0% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes slideLeft {
    0% {
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes slideLeftSmall {
    0% {
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes slideLeftSmall {
    0% {
        -webkit-transform: translateX(10%);
        transform: translateX(10%);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes slideUpFadeIn {
    0% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes slideUpFadeIn {
    0% {
        -webkit-transform: translateY(50%);
        transform: translateY(50%);
        opacity: 0;
    }
    100% {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@-webkit-keyframes scaleXIn {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes scaleXIn {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }
    100% {
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes zoomFadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(1000px);
        transform: translateZ(1000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes zoomFadeIn {
    0% {
        opacity: 0;
        -webkit-transform: translateZ(1000px);
        transform: translateZ(1000px);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes jitter {
    0% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
    10% {
        -webkit-transform: translateX(2px) translateY(2px);
        transform: translateX(2px) translateY(2px);
        opacity: 0.8;
    }
    20% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
        opacity: 0.47;
    }
    30% {
        -webkit-transform: translateX(0px) translateY(2px);
        transform: translateX(0px) translateY(2px);
        opacity: 0.3;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(1px);
        transform: translateX(-1px) translateY(1px);
        opacity: 0.96;
    }
    80% {
        -webkit-transform: translateX(0px) translateY(-2px);
        transform: translateX(0px) translateY(-2px);
        opacity: 0.9;
    }
    90% {
        -webkit-transform: translateX(1px) translateY(-2px);
        transform: translateX(1px) translateY(-2px);
        opacity: 0.81;
    }
    100% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}
@keyframes jitter {
    0% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
        opacity: 1;
    }
    10% {
        -webkit-transform: translateX(2px) translateY(2px);
        transform: translateX(2px) translateY(2px);
        opacity: 0.8;
    }
    20% {
        -webkit-transform: translateX(0px) translateY(0px);
        transform: translateX(0px) translateY(0px);
        opacity: 0.47;
    }
    30% {
        -webkit-transform: translateX(0px) translateY(2px);
        transform: translateX(0px) translateY(2px);
        opacity: 0.3;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(1px);
        transform: translateX(-1px) translateY(1px);
        opacity: 0.96;
    }
    80% {
        -webkit-transform: translateX(0px) translateY(-2px);
        transform: translateX(0px) translateY(-2px);
        opacity: 0.9;
    }
    90% {
        -webkit-transform: translateX(1px) translateY(-2px);
        transform: translateX(1px) translateY(-2px);
        opacity: 0.81;
    }
    100% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
}

HTML

点击GO HOME按钮会有轻微颤动效果。

SVG, CSS3

编辑器支持Emmet

快捷键

点击GO HOME按钮会有轻微颤动效果。

SVG, CSS3

HTML5 SVG 404玻璃屏幕裂缝效果页面

CSS3+SVG 有创意的动画404页面

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：