CSS3 SVG 幽灵公主动画电影主页

Princess Mononoke Homage 《幽灵公主》是吉卜力工作室于1997年推出的一部动画电影。很棒的网页作品！

CSS3, SVG

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
    background: #5a4969;
    background: radial-gradient(ellipse at center, #5a4969 12%, #5a4969 41%, #834958 76%, #71475a 99%, #f02f17 100%);
    overflow: hidden;
}
#world {
    height: 100vh;
    position: relative;
}
#world .clouds {
    position: absolute;
    z-index: -1;
    transform: translateZ(0);
    opacity: 0.7;
}
#world #clouds-long {
    animation: clouds-long 20s linear infinite;
}
#world #clouds1 {
    animation: clouds1 6s linear infinite;
}
#world #clouds2 {
    animation: clouds2 9s linear infinite;
    z-index: 2;
}
@keyframes clouds-long {
    0% {
        transform: translate(100vw, -20%);
    }
    100% {
        transform: translate(-8300px, -70%);
    }
}
@keyframes clouds1 {
    0% {
        transform: translate(110vw, -20%);
    }
    100% {
        transform: translate(-3000px, -70%);
    }
}
@keyframes clouds2 {
    0% {
        transform: translate(110vw, -20%);
    }
    100% {
        transform: translate(-3000px, -70%);
    }
}
@keyframes wind-frame1 {
    0% {
        visibility: visible;
    }
    9% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame2 {
    0% {
        visibility: hidden;
    }
    9% {
        visibility: visible;
    }
    18% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame3 {
    0% {
        visibility: hidden;
    }
    9% {
        visibility: hidden;
    }
    18% {
        visibility: visible;
    }
    27% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame4 {
    0% {
        visibility: hidden;
    }
    18% {
        visibility: hidden;
    }
    27% {
        visibility: visible;
    }
    36% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame5 {
    0% {
        visibility: hidden;
    }
    27% {
        visibility: hidden;
    }
    36% {
        visibility: visible;
    }
    45% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame6 {
    0% {
        visibility: hidden;
    }
    36% {
        visibility: hidden;
    }
    45% {
        visibility: visible;
    }
    54% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame7 {
    0% {
        visibility: hidden;
    }
    45% {
        visibility: hidden;
    }
    54% {
        visibility: visible;
    }
    63% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame8 {
    0% {
        visibility: hidden;
    }
    54% {
        visibility: hidden;
    }
    63% {
        visibility: visible;
    }
    72% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame9 {
    0% {
        visibility: hidden;
    }
    63% {
        visibility: hidden;
    }
    72% {
        visibility: visible;
    }
    81% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame10 {
    0% {
        visibility: hidden;
    }
    72% {
        visibility: hidden;
    }
    81% {
        visibility: visible;
    }
    90% {
        visibility: hidden;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame11 {
    0% {
        visibility: hidden;
    }
    81% {
        visibility: hidden;
    }
    90% {
        visibility: visible;
    }
    100% {
        visibility: hidden;
    }
}
@keyframes wind-frame12 {
    0% {
        visibility: hidden;
    }
    90% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}
#frame1 {
    animation: wind-frame1 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame2 {
    animation: wind-frame2 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame3 {
    animation: wind-frame3 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame4 {
    animation: wind-frame4 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame5 {
    animation: wind-frame5 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame6 {
    animation: wind-frame6 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame7 {
    animation: wind-frame7 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame8 {
    animation: wind-frame8 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame9 {
    animation: wind-frame9 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame10 {
    animation: wind-frame10 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame11 {
    animation: wind-frame11 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}
#frame12 {
    animation: wind-frame12 1.3s linear infinite;
    transform: translateZ(0);
    z-index: 1;
}

HTML

</svg>
</div>

Princess Mononoke Homage 《幽灵公主》是吉卜力工作室于1997年推出的一部动画电影。很棒的网页作品！

CSS3, SVG

编辑器支持Emmet

快捷键

Princess Mononoke Homage 《幽灵公主》是吉卜力工作室于1997年推出的一部动画电影。 很棒的网页作品！

CSS3, SVG

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

CSS3+SVG 多条波浪叠加动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Princess Mononoke Homage 《幽灵公主》是吉卜力工作室于1997年推出的一部动画电影。很棒的网页作品！