您的位置：首页 > Web前端 > CSS

css3简单实现页面中出现雪花飘落效果

2017-12-22 14:09 537 查看

快要到圣诞节了，浏览了常去看的学习网站，发现那个网站多了一层雪花飘落的遮罩层，感觉挺有假日气氛的。就自己尝试写了个简单的雪花飘落的遮罩层，大致效果如下：

雪花是透明背景的图片，通过css动画来调整雪花图片位置，来实现雪花飘落的动效。为了突出雪花，body的背景色设置成了黑色。。。其实雪花就只是一个遮罩层，下面的背景应该是原来的网页，自己模拟的就只写雪花效果

话不多说了，上代码

<style>
body{
background: #000;
}
#snow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: url('snow1.png'),  url('snow2.png');
-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>

例外，附加上雪花的图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 动画 css

相关文章推荐

新的分享

章节导航