CSS3失恋孤独的雪中女孩

lonely girl in snowing day，简单而诗意的h5动画

css, snow, girl

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background-image: url('/uploads/1905/lonely-girl.jpg');
    background-size: 100%;
}
#snow {
    background: none;
    font-family: Androgyne;
    background-image: url('/uploads/1905/s1.png'), url('/uploads/1905/s2.png'), url('/uploads/1905/s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    -webkit-animation: snow 12s linear infinite;
    -moz-animation: snow 12s linear infinite;
    -ms-animation: snow 12s linear infinite;
    animation: snow 12s linear infinite;
}
@keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-moz-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 400px 1000px, 200px 400px, 100px 300px;
    }
}
@-webkit-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}
@-ms-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }
    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }
    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}

HTML

lonely girl in snowing day，简单而诗意的h5动画

css, snow, girl

编辑器支持Emmet

快捷键

lonely girl in snowing day，简单而诗意的h5动画

css, snow, girl

CSS3 摇晃的玻璃球中的水

纯CSS实现的荡秋千女孩

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：