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

您所在的位置：网站首页 › 北京雪花飘飘图片 › css3简单实现页面中出现雪花飘落效果

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

2023-10-25 08:35| 来源: 网络整理| 查看: 265

快要到圣诞节了，浏览了常去看的学习网站，发现那个网站多了一层雪花飘落的遮罩层，感觉挺有假日气氛的。就自己尝试写了个简单的雪花飘落的遮罩层，大致效果如下：这里写图片描述雪花是透明背景的图片，通过css动画来调整雪花图片位置，来实现雪花飘落的动效。为了突出雪花，body的背景色设置成了黑色。。。其实雪花就只是一个遮罩层，下面的背景应该是原来的网页，自己模拟的就只写雪花效果话不多说了，上代码

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; } }

例外，附加上雪花的图片这里写图片描述

【本文地址】

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

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

今日新闻

推荐新闻