分享一个用强大的css3动画做的雪花背景，做网站背景很漂亮~
补充一点关于animation的知识点
animation
必填项
animation-name 动画名称（关键帧名称）
animation-duration 动画持续时间
选填
animation-timing-function 动画运动形式
linear 匀速。
ease 缓冲。
ease-in 由慢到快。
ease-out 由快到慢。
ease-in-out 由慢到快再到慢。
cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
animation-delay 动画延迟
！注意只是第一次
animation-iteration-count 重复次数
infinite 无限
animation-direction 播放前重置
动画是否重置后再开始播放
alternate 动画直接从上一次停止的位置开始执行
normal 动画第二次直接跳到0%的状态开始执行
animation-fill-mode 设置动画时间之外的状态
none 不设置动画之外的状态
forwards 动画结束时的状态
backwards 动画开始时的状态
both 动画结束或开始的状态
上代码~
<html>
<head>
<title>Title</title>
<style>
body {
margin: 0;
background-color: skyblue;
}
#snowMask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
/*设置背景图*/
background: url('img/snow1.png'), url('img/snow2.png');
pointer-events: none;
/*调用动画*/
-webkit-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
}
/*声明帧动画，关键帧需要通过animation调用*/
@keyframes snow {
0% {
background-position: 0 0, 0 0;
}
100% {
background-position: 500px 1000px, 500px 500px;
}
}
</style>
</head>
<body>
<div id="snowMask" style="display: block;"></div>
</body>
</html>
图片在这里=>
snow1.png
snow2.png
网友评论