html css雪花动画效果,css3动画雪花特效

分享一个用强大的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 动画结束或开始的状态

上代码~

Title

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;

}

}

图片在这里=>

snow1.png

snow2.png