css3-animation实现雪花效果

发表于 | 分类于 | 阅读次数:

前言

前几天被问到如何用css3写一个顺滑的下雪动效。。我很难受。。因为我连下雪动效怎么做都不怎么记得，只记得几个关键字，animation、keyframes。。那还谈什么顺滑。。

CSS3-animation实现下雪效果

直接上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    body{background: #000;}
    #snow{
        position: fixed;left: 0;top: 0;right: 0;bottom: 0;
        background: url('https://upload-images.jianshu.io/upload_images/7166236-0bfcb6033aaf5365.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'),
        url('https://upload-images.jianshu.io/upload_images/7166236-24b659efa1dbe07f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240');
        -webkit-animation: snow 15s linear infinite;
        animation: snow 15s linear infinite;
    }
    @keyframes snow{
        0% {background-position: 0 0, 0 0;}
        100% {background-position: 500px 1000px, 500px 500px;}
    }
    @-webkit-keyframes snow{
        0% {background-position: 0 0, 0 0;}
        100% {background-position: 500px 1000px, 500px 500px;}
    }
</style>
</head>
<body><div id="snow"></div></body>
</html>

image.png

animation属性解析

值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

animation-timing-function

值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。