SVG + CSS3山中雪松动画

Winter Snowing in the mountain

html5, winter

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Unica+One");
.cls-2 {
    fill: #fff;
}
.cls-4 {
    fill: url(#radial-gradient);
}
.cls-5 {
    fill: url(#linear-gradient);
}
.cls-6 {
    fill: #f2f2f2;
}
.cls-7 {
    fill: url(#linear-gradient-2);
}
.cls-8 {
    fill: url(#linear-gradient-3);
}
.cls-9 {
    fill: #2c1800;
}
.snowFlake {
    fill: #fff;
    -webkit-animation: flakes 8s linear infinite;
    animation: flakes 8s linear infinite;
    -webkit-transform: translate(0px, 1000px);
    transform: translate(0px, 1000px);
    opacity: 0.8;
}
.snowFlake:nth-child(1) {
    -webkit-animation-delay: -0.84s;
    animation-delay: -0.84s;
}
.snowFlake:nth-child(2) {
    -webkit-animation-delay: -1.82s;
    animation-delay: -1.82s;
}
.snowFlake:nth-child(3) {
    -webkit-animation-delay: -4.31s;
    animation-delay: -4.31s;
}
.snowFlake:nth-child(4) {
    -webkit-animation-delay: -5.08s;
    animation-delay: -5.08s;
}
.snowFlake:nth-child(5) {
    -webkit-animation-delay: -5.56s;
    animation-delay: -5.56s;
}
.snowFlake:nth-child(6) {
    -webkit-animation-delay: -3.41s;
    animation-delay: -3.41s;
}
.snowFlake:nth-child(7) {
    -webkit-animation-delay: -5.72s;
    animation-delay: -5.72s;
}
.snowFlake:nth-child(8) {
    -webkit-animation-delay: -3.51s;
    animation-delay: -3.51s;
}
.snowFlake:nth-child(9) {
    -webkit-animation-delay: -0.72s;
    animation-delay: -0.72s;
}
.snowFlake:nth-child(10) {
    -webkit-animation-delay: -7.9s;
    animation-delay: -7.9s;
}
.snowFlake:nth-child(11) {
    -webkit-animation-delay: -0.39s;
    animation-delay: -0.39s;
}
.snowFlake:nth-child(12) {
    -webkit-animation-delay: -6.39s;
    animation-delay: -6.39s;
}
.snowFlake:nth-child(13) {
    -webkit-animation-delay: -4.41s;
    animation-delay: -4.41s;
}
.snowFlake:nth-child(14) {
    -webkit-animation-delay: -6.59s;
    animation-delay: -6.59s;
}
.snowFlake:nth-child(15) {
    -webkit-animation-delay: -5.84s;
    animation-delay: -5.84s;
}
.snowFlake:nth-child(16) {
    -webkit-animation-delay: -1.92s;
    animation-delay: -1.92s;
}
.snowFlake:nth-child(17) {
    -webkit-animation-delay: -2.73s;
    animation-delay: -2.73s;
}
.snowFlake:nth-child(18) {
    -webkit-animation-delay: -7.73s;
    animation-delay: -7.73s;
}
.snowFlake:nth-child(19) {
    -webkit-animation-delay: -7.06s;
    animation-delay: -7.06s;
}
.snowFlake:nth-child(20) {
    -webkit-animation-delay: -3.42s;
    animation-delay: -3.42s;
}
@-webkit-keyframes flakes {
    0% {
        -webkit-transform: translate(45px, 0);
        transform: translate(45px, 0);
    }
    25% {
        -webkit-transform: translate(50px, 250px);
        transform: translate(50px, 250px);
    }
    50% {
        -webkit-transform: translate(60px, 500px);
        transform: translate(60px, 500px);
    }
    75% {
        -webkit-transform: translate(70px, 750px);
        transform: translate(70px, 750px);
    }
    100% {
        -webkit-transform: translate(60px, 1000px);
        transform: translate(60px, 1000px);
    }
}
@keyframes flakes {
    0% {
        -webkit-transform: translate(45px, 0);
        transform: translate(45px, 0);
    }
    25% {
        -webkit-transform: translate(50px, 250px);
        transform: translate(50px, 250px);
    }
    50% {
        -webkit-transform: translate(60px, 500px);
        transform: translate(60px, 500px);
    }
    75% {
        -webkit-transform: translate(70px, 750px);
        transform: translate(70px, 750px);
    }
    100% {
        -webkit-transform: translate(60px, 1000px);
        transform: translate(60px, 1000px);
    }
}
/*Page Setup*/

svg {
    width: 100vw;
    height: 80vh;
}
body {
    background: #f9f0ec;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.title {
    height: 10vh;
    line-height: 10vh;
    font-size: 8vh;
    padding: 2.5vh;
    margin: 0;
    color: #6b422e;
    border-top: 1px solid;
    border-bottom: 1px solid;
    font-family: 'Unica One', cursive;
}

HTML

Winter Snowing in the mountain

html5, winter

编辑器支持Emmet

快捷键

Winter Snowing in the mountain

html5, winter

HTML5 SVG+CSS3 开心主妇 月光宝石 岩石地面

HTML5 SVG常见移动应用中滑动解锁动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

HTML5 SVG+CSS3 开心主妇月光宝石岩石地面