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

最新推荐文章于 2022-07-26 09:59:54 发布

喵大嗷

最新推荐文章于 2022-07-26 09:59:54 发布

阅读量1.6w

点赞数 8

分类专栏： css3 文章标签： css3 动画 css

本文链接：https://blog.csdn.net/connie_0217/article/details/78872721

版权

css3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

快要到圣诞节了，浏览了常去看的学习网站，发现那个网站多了一层雪花飘落的遮罩层，感觉挺有假日气氛的。就自己尝试写了个简单的雪花飘落的遮罩层，大致效果如下：
这里写图片描述
雪花是透明背景的图片，通过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>