html+CSS样式：雪花飘落背景（雪花为图片）

最新推荐文章于 2025-03-12 14:04:45 发布

静静静静静rj

最新推荐文章于 2025-03-12 14:04:45 发布

阅读量6.4k

点赞数 23

分类专栏： css 雪花飘落背景 html 文章标签： html css3

本文链接：https://blog.youkuaiyun.com/renjingzhaozhao/article/details/105383605

版权

html 同时被 3 个专栏收录

23 篇文章

订阅专栏

css

17 篇文章

订阅专栏

雪花飘落背景

2 篇文章

订阅专栏

多种雪花图片，自由下落到底端渐变消失

html代码

<!DOCTYPE html>

<html style="background-color: black">

<head>

	<meta charset="UTF-8">

	<title>雪花飘落</title>

	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>

	<style>

			html,body {width: 100%;}

			#leafContainer

			{

				position: fixed;

				z-index: 2;

				width: 100%;

				height: 100%;

				top: 0;

				overflow: hidden;

			}


			#leafContainer > div

			{

				position: absolute;

				max-width: 100px;

				max-height: 100px;

				-webkit-animation-iteration-count: infinite, infinite;
				-webkit-animation-direction: normal, normal;

				-webkit-animation-timing-function: linear, ease-in;

			}


			#leafContainer > div > img

			{

				width: 100%;

				-webkit-animation-iteration-count: infinite;

				-webkit-animation-direction: alternate;

				-webkit-animation-timing-function: ease-in-out;

				-webkit-transform-origin: 50% -100%;

			}

			@-webkit-keyframes fade

			{

				0%   {

				opacity: 1;

			}

			95%

			{

				opacity: 1;

			}

			100%

			{

				opacity: 0;

			}

			}

			@-webkit-keyframes drop

			{

				0%   {

				-webkit-transform: translate(0px, -50px);

			}

			100%

			{

				-webkit-transform: translate(0px, 650px);

			}

			}

			@-webkit-keyframes clockwiseSpin

			{

				0%   {

				-webkit-transform: rotate(-50deg);

			}

			100%

			{

				-webkit-transform: rotate(50deg);

			}

			}

			@-webkit-keyframes counterclockwiseSpinAndFlip

			{

				0%   {

				-webkit-transform: scale(-1, 1) rotate(50deg);

			}

			100%

			{

				-webkit-transform: scale(-1, 1) rotate(-50deg);

			}

			}

		</style>

	<script>


		const NUMBER_OF_LEAVES = 50;

 

	function init()

		{

		    

		    var container = document.getElementById('leafContainer');

		   

		    for (var i = 0; i < NUMBER_OF_LEAVES; i++) 

		    {

		        container.appendChild(createALeaf());

		    }

		}



		function randomInteger(low, high)

		{

		    return low + Math.floor(Math.random() * (high - low));

		}



		 

		function randomFloat(low, high)

		{

		    return low + Math.random() * (high - low);

		}



		 

		function pixelValue(value)

		{

		    return value + 'px';

		}

		 

		function durationValue(value)

		{

		    return value + 's';

		}

		 

		function createALeaf()

		{

    

    var leafDiv = document.createElement('div');

    var image = document.createElement('img');

    



    image.src ='snow' + randomInteger(1, 5) + '.png';



    leafDiv.style.top = "-10px";





    leafDiv.style.left = pixelValue(randomInteger(0, 1000));

    

   

    var spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip';

    

    

    leafDiv.style.webkitAnimationName = 'fade, drop';

    image.style.webkitAnimationName = spinAnimationName;

    

   

    var fadeAndDropDuration = durationValue(randomFloat(5, 11));

   

    var spinDuration = durationValue(randomFloat(4, 8));

     

    leafDiv.style.webkitAnimationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration;



    var leafDelay = durationValue(randomFloat(0, 5));

    leafDiv.style.webkitAnimationDelay = leafDelay + ', ' + leafDelay;



    image.style.webkitAnimationDuration = spinDuration;

 

    leafDiv.appendChild(image);

 

    return leafDiv;

	}

 

		window.addEventListener('load', init);

		</script></head>

<body>

	<div id="leafContainer">

		</div>

</body>

</html>

images素材：4个，能。。。看清的吧。。