带鼠标捕获功能的403错误页面

Mouse Jail 403, 鼠标悬停在页面上时，会被自动捕获到中间的小圆圈中。

h5, error, template

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

h1 {
    font-size: 15vmin;
    margin-bottom: 0;
}
h2 {
    font-size: 5vmin;
    margin-top: 0;
    margin-bottom: 40px;
}
body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: white;
    align-items: center;
    justify-content: center;
    cursor: none;
    --mouseStartX: -64;
    --mouseStartY: -64;
    overflow: hidden;
}
#jail {
    position: relative;
    border: 2px solid gray;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}
#spinner {
    display: none;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animation: 4s spin linear infinite;
    animation: 4s spin linear infinite;
}
body.seenMouse #spinner {
    display: block;
}
body.seenMouse #cursor {
    position: absolute;
    left: 12px;
    top: 8px;
    -webkit-animation: 2s dragMouse ease forwards;
    animation: 2s dragMouse ease forwards;
    width: 32px;
    height: 32px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QAAAAAAAD5Q7t/AAABX0lEQVRYw+3UMUvDUBQF4EOv3Nk2OnjxB4gg6OQo2Nm/5c9w0snJyUWlKAhBEaRgKypiiK/FrdBCad/NdWkgFnHyNUvOEshyPk5eHoilRyy7KCm12fOwNASx9D5d34jlshQEsfTMzEpD5IDSEEVAKYh5wMIRvwFU1ZIkXQxiHqCqNp1ObTwe2+vbe3hEEVAsH41GNhgM7OmpGxSRX0TIsgxZlkFVoarw3kNVsbLSwH18vo9Al1Xtr3LvPbz3iKI6bm/O9gEc/jdgKQfk5WnqsLoawXuPtfXtqxCz/wix9PJv/vz8YsQyPD45NeecEcsFsRwEBxTLiWWXWNpJklgc3xmxtEP21wAgTR02t/ZGAJo6cTGAj4eHNhqNZQD4CLrC7BcbFk/4bIVOt9u1VuvaiOUxVP+STlxz/qVOXEwsb/3+10YU1QFgGmyBP5YRYukQyxGx7CwcUKVKlSpVqiwq37opL7UKP+WdAAAAAElFTkSuQmCC);
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg);
    }
}
@-webkit-keyframes dragMouse {
    0% {
        left: calc(var(--mouseX)*1px);
        top: calc(var(--mouseY)*1px);
    }
    100% {
        left: calc(var(--mouseX)/var(--width)*10px + 12px);
        top: calc(var(--mouseY)/var(--height)*10px + 8px);
    }
}
@keyframes dragMouse {
    0% {
        left: calc(var(--mouseX)*1px);
        top: calc(var(--mouseY)*1px);
    }
    100% {
        left: calc(var(--mouseX)/var(--width)*10px + 12px);
        top: calc(var(--mouseY)/var(--height)*10px + 8px);
    }
}

HTML

Mouse Jail 403, 鼠标悬停在页面上时，会被自动捕获到中间的小圆圈中。

h5, error, template

编辑器支持Emmet

快捷键

Mouse Jail 403, 鼠标悬停在页面上时，会被自动捕获到中间的小圆圈中。

h5, error, template

HTML5 带重力感应的404错误页面模板

有趣的404错误页面模板 - 野蛮人互殴动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：