HTML5超可爱的会游泳的幽灵宝宝

幽灵宝宝会跟随你的鼠标而游走

h5, css3, ghost, swim

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: radial-gradient(circle at center, #222, #000);
}
body #speedcapture {
    opacity: 0.25;
}
body .ghost {
    width: 100px;
    height: 100px;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
    background: #fff;
    position: absolute;
    transition: 0s ease-in-out;
    border-radius: 100%;
    -webkit-animation: swirl 2s ease-in-out infinite alternate;
    animation: swirl 2s ease-in-out infinite alternate;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
}
body .ghost:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    -webkit-animation: bubbling 2s linear infinite;
    animation: bubbling 2s linear infinite;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}
@-webkit-keyframes bubbling {
    0% {
        box-shadow: 50px 150px 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: -100px 0px 0 white;
    }
    100% {
        box-shadow: 50px -150px 0 rgba(255, 255, 255, 0);
    }
}
@keyframes bubbling {
    0% {
        box-shadow: 50px 150px 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: -100px 0px 0 white;
    }
    100% {
        box-shadow: 50px -150px 0 rgba(255, 255, 255, 0);
    }
}
body .ghost.face .arms {
    width: 120px;
    height: 30px;
    position: absolute;
    left: -10px;
    top: 45px;
    z-index: -1;
    border-radius: 50px;
}
body .ghost.face .arms .arm {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 30px;
    width: 30px;
    border-radius: 100px 0 0 0;
    border-top: 15px solid #fff;
    border-left: 15px solid #fff;
    -webkit-animation: wave 2s ease-in-out infinite alternate;
    animation: wave 2s ease-in-out infinite alternate;
    -webkit-transform-origin: top right;
    transform-origin: top right;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
    opacity: 0.5;
}
body .ghost.face .arms .arm:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #fff;
    bottom: -5px;
    left: -15px;
    border-radius: 100%;
}
@-webkit-keyframes wave {
    to {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
}
@keyframes wave {
    to {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
}
body .ghost.face .arms .arm:last-of-type {
    left: auto;
    right: 0;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    border-radius: 0 100px 0 0;
    border-top: 15px solid #fff;
    border-right: 15px solid #fff;
    border-left: none;
}
body .ghost.face .arms .arm:last-of-type:before {
    left: auto;
    right: -15px;
}
body .ghost.face .inner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    -webkit-animation: look1 4s ease-in-out infinite;
    animation: look1 4s ease-in-out infinite;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
@-webkit-keyframes look1 {
    0% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
    25% {
        -webkit-transform: translateX(20px) rotateY(10deg);
        transform: translateX(20px) rotateY(10deg);
    }
    75% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
    100% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
}
@keyframes look1 {
    0% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
    25% {
        -webkit-transform: translateX(20px) rotateY(10deg);
        transform: translateX(20px) rotateY(10deg);
    }
    75% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
    100% {
        -webkit-transform: translateX(-20px) rotateY(-10deg);
        transform: translateX(-20px) rotateY(-10deg);
    }
}
body .ghost.face .inner .mouth {
    position: absolute;
    width: 20px;
    height: 10px;
    border-radius: 5px 5px 150px 150px;
    bottom: 20px;
    left: 40px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    border-left: 2px solid #000;
}
body .ghost.face .inner .mouth:before {
    content: '';
    position: absolute;
    width: 7.5px;
    height: 7.5px;
    background: #000;
    border-radius: 100%;
    top: -25px;
    left: -17.5px;
    box-shadow: 45px 0 0 #000;
}
@-webkit-keyframes swirl {
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}
@keyframes swirl {
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}
body .ghost:nth-of-type(1) {
    transition: 0.05s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 96px;
    height: 96px;
    margin-left: calc(96px / -2);
    margin-top: calc(96px / -2);
    background: #f7f7f7;
    z-index: 19;
    -webkit-animation-delay: 0.0333333333s;
    animation-delay: 0.0333333333s;
}
body .ghost:nth-of-type(1):before {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    opacity: 0.25;
}
body .ghost:nth-of-type(2) {
    transition: 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 92px;
    height: 92px;
    margin-left: calc(92px / -2);
    margin-top: calc(92px / -2);
    background: #f0f0f0;
    z-index: 18;
    -webkit-animation-delay: 0.0666666667s;
    animation-delay: 0.0666666667s;
}
body .ghost:nth-of-type(2):before {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    opacity: 0.25;
}
body .ghost:nth-of-type(3) {
    transition: 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 88px;
    height: 88px;
    margin-left: calc(88px / -2);
    margin-top: calc(88px / -2);
    background: #e8e8e8;
    z-index: 17;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
body .ghost:nth-of-type(3):before {
    -webkit-animation-delay: 0.4285714286s;
    animation-delay: 0.4285714286s;
    opacity: 0.25;
}
body .ghost:nth-of-type(4) {
    transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 84px;
    height: 84px;
    margin-left: calc(84px / -2);
    margin-top: calc(84px / -2);
    background: #e0e0e0;
    z-index: 16;
    -webkit-animation-delay: 0.1333333333s;
    animation-delay: 0.1333333333s;
}
body .ghost:nth-of-type(4):before {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    opacity: 0.25;
}
body .ghost:nth-of-type(5) {
    transition: 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 80px;
    height: 80px;
    margin-left: calc(80px / -2);
    margin-top: calc(80px / -2);
    background: #d9d9d9;
    z-index: 15;
    -webkit-animation-delay: 0.1666666667s;
    animation-delay: 0.1666666667s;
}
body .ghost:nth-of-type(5):before {
    -webkit-animation-delay: 0.8333333333s;
    animation-delay: 0.8333333333s;
    opacity: 0.25;
}
body .ghost:nth-of-type(6) {
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 76px;
    height: 76px;
    margin-left: calc(76px / -2);
    margin-top: calc(76px / -2);
    background: #d1d1d1;
    z-index: 14;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
body .ghost:nth-of-type(6):before {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    opacity: 0.25;
}
body .ghost:nth-of-type(7) {
    transition: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 72px;
    height: 72px;
    margin-left: calc(72px / -2);
    margin-top: calc(72px / -2);
    background: #c9c9c9;
    z-index: 13;
    -webkit-animation-delay: 0.2333333333s;
    animation-delay: 0.2333333333s;
}
body .ghost:nth-of-type(7):before {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
    opacity: 0.25;
}
body .ghost:nth-of-type(8) {
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 68px;
    height: 68px;
    margin-left: calc(68px / -2);
    margin-top: calc(68px / -2);
    background: #c2c2c2;
    z-index: 12;
    -webkit-animation-delay: 0.2666666667s;
    animation-delay: 0.2666666667s;
}
body .ghost:nth-of-type(8):before {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
    opacity: 0.25;
}
body .ghost:nth-of-type(9) {
    transition: 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 64px;
    height: 64px;
    margin-left: calc(64px / -2);
    margin-top: calc(64px / -2);
    background: #bababa;
    z-index: 11;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
body .ghost:nth-of-type(9):before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    opacity: 0.25;
}
body .ghost:nth-of-type(10) {
    transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 60px;
    height: 60px;
    margin-left: calc(60px / -2);
    margin-top: calc(60px / -2);
    background: #b3b3b3;
    z-index: 10;
    -webkit-animation-delay: 0.3333333333s;
    animation-delay: 0.3333333333s;
}
body .ghost:nth-of-type(10):before {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    opacity: 0.25;
}
body .ghost:nth-of-type(11) {
    transition: 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 56px;
    height: 56px;
    margin-left: calc(56px / -2);
    margin-top: calc(56px / -2);
    background: #ababab;
    z-index: 9;
    -webkit-animation-delay: 0.3666666667s;
    animation-delay: 0.3666666667s;
}
body .ghost:nth-of-type(11):before {
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
    opacity: 0.25;
}
body .ghost:nth-of-type(12) {
    transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 52px;
    height: 52px;
    margin-left: calc(52px / -2);
    margin-top: calc(52px / -2);
    background: #a3a3a3;
    z-index: 8;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
body .ghost:nth-of-type(12):before {
    -webkit-animation-delay: 1.7142857143s;
    animation-delay: 1.7142857143s;
    opacity: 0.25;
}
body .ghost:nth-of-type(13) {
    transition: 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 48px;
    height: 48px;
    margin-left: calc(48px / -2);
    margin-top: calc(48px / -2);
    background: #9c9c9c;
    z-index: 7;
    -webkit-animation-delay: 0.4333333333s;
    animation-delay: 0.4333333333s;
}
body .ghost:nth-of-type(13):before {
    -webkit-animation-delay: 6.5s;
    animation-delay: 6.5s;
    opacity: 0.25;
}
body .ghost:nth-of-type(14) {
    transition: 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 44px;
    height: 44px;
    margin-left: calc(44px / -2);
    margin-top: calc(44px / -2);
    background: #949494;
    z-index: 6;
    -webkit-animation-delay: 0.4666666667s;
    animation-delay: 0.4666666667s;
}
body .ghost:nth-of-type(14):before {
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
    opacity: 0.25;
}
body .ghost:nth-of-type(15) {
    transition: 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 40px;
    height: 40px;
    margin-left: calc(40px / -2);
    margin-top: calc(40px / -2);
    background: #8c8c8c;
    z-index: 5;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
body .ghost:nth-of-type(15):before {
    -webkit-animation-delay: 1.875s;
    animation-delay: 1.875s;
    opacity: 0.25;
}
body .ghost:nth-of-type(16) {
    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 36px;
    height: 36px;
    margin-left: calc(36px / -2);
    margin-top: calc(36px / -2);
    background: #858585;
    z-index: 4;
    -webkit-animation-delay: 0.5333333333s;
    animation-delay: 0.5333333333s;
}
body .ghost:nth-of-type(16):before {
    -webkit-animation-delay: 1.7777777778s;
    animation-delay: 1.7777777778s;
    opacity: 0.25;
}
body .ghost:nth-of-type(17) {
    transition: 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 32px;
    height: 32px;
    margin-left: calc(32px / -2);
    margin-top: calc(32px / -2);
    background: #7d7d7d;
    z-index: 3;
    -webkit-animation-delay: 0.5666666667s;
    animation-delay: 0.5666666667s;
}
body .ghost:nth-of-type(17):before {
    -webkit-animation-delay: 3.4s;
    animation-delay: 3.4s;
    opacity: 0.25;
}
body .ghost:nth-of-type(18) {
    transition: 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 28px;
    height: 28px;
    margin-left: calc(28px / -2);
    margin-top: calc(28px / -2);
    background: #757575;
    z-index: 2;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
body .ghost:nth-of-type(18):before {
    -webkit-animation-delay: 3.6s;
    animation-delay: 3.6s;
    opacity: 0.25;
}
body .ghost:nth-of-type(19) {
    transition: 0.95s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 24px;
    height: 24px;
    margin-left: calc(24px / -2);
    margin-top: calc(24px / -2);
    background: #6e6e6e;
    z-index: 1;
    -webkit-animation-delay: 0.6333333333s;
    animation-delay: 0.6333333333s;
}
body .ghost:nth-of-type(19):before {
    -webkit-animation-delay: 1.9s;
    animation-delay: 1.9s;
    opacity: 0.25;
}
body .ghost:nth-of-type(20) {
    transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 20px;
    height: 20px;
    margin-left: calc(20px / -2);
    margin-top: calc(20px / -2);
    background: #666666;
    z-index: 0;
    -webkit-animation-delay: 0.6666666667s;
    animation-delay: 0.6666666667s;
}
body .ghost:nth-of-type(20):before {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
    opacity: 0.25;
}

HTML

幽灵宝宝会跟随你的鼠标而游走

h5, css3, ghost, swim

编辑器支持Emmet

快捷键

幽灵宝宝会跟随你的鼠标而游走

h5, css3, ghost, swim

HTML5 Canvas可定制的粒子游泳动画特效

HTML5 Canvas可拖拉的果冻幽灵

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：