利用CSS3中animation属性实现雪花飘落功能

最新推荐文章于 2023-01-04 11:20:28 发布

墨影司

最新推荐文章于 2023-01-04 11:20:28 发布

阅读量6k

点赞数

分类专栏： web前端文章标签： HTML5 css3 动画 animation transform

本文链接：https://blog.csdn.net/u012879038/article/details/24008733

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先介绍一下CSS3中的animation的特性吧。

在CSS3中我们可以使用animation属性来创建复杂的动画效果，包括移动，旋转，缩放，倾斜（后几个请参考css3中的transform，scale等属性）等。而这一切，只需要我们创建关键帧（@keyframes），然后将自己想要实现的动作添加进去就可以实现。

比如：

@keyframes bgchange{
    from {background:red;}
    to     {background:yellow}
}

div:hover{
    animation:bgchange 5s;
}

当鼠标悬停在<div>时，该<div>的背景颜色会在五秒之内从红色变为黄色。

注意：使用animation和@keyframes时不同浏览器需要加上不同的前缀名！

下面代码实现雪花飘落功能：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>snowing snow</title>
		<style>
			body{
				background: #eee;
			}
			@keyframes mysnow{
				0%{
					bottom:100%;
					opacity:0;
				}
				50%{
					opacity:1;
					transform: rotate(1080deg);
				}
				100%{
					transform: rotate(0deg);
					opacity: 0;
					bottom:0;
				}
			}
			@-webkit-keyframes mysnow{
				0%{
					bottom:100%;
					opacity:0;
				}
				50%{
					opacity:1;
					-webkit-transform: rotate(1080deg);
				}
				100%{
					-webkit-transform: rotate(0deg);
					opacity: 0;
					bottom:0;
				}
			}
			@-moz-keyframes mysnow{
				0%{
					bottom:100%;
					opacity:0;
				}
				50%{
					opacity:1;
					-moz-transform: rotate(1080deg);
				}
				100%{
					-moz-transform: rotate(0deg);
					opacity: 0;
					bottom:0;
				}
			}
			@-ms-keyframes mysnow{
				0%{
					bottom:100%;
					opacity:0;
				}
				50%{
					opacity:1;
					-ms-transform: rotate(1080deg);
				}
				100%{
					-ms-transform: rotate(0deg);
					opacity: 0;
					bottom:0;
				}
			}
			@-o-keyframes mysnow{
				0%{
					bottom:100%;
					opacity:0;
				}
				50%{
					opacity:1;
					-o-transform: rotate(1080deg);
				}
				100%{
					-o-transform: rotate(0deg);
					opacity: 0;
					bottom:0;
				}
			}
			.roll{
				position:absolute;
				opacity:0;
				animation: mysnow 5s ;
				-webkit-animation: mysnow 5s ;
				-moz-animation: mysnow 5s ;
				-ms-animation: mysnow 5s ;
				-o-animation: mysnow 5s ;
				height:80px;
			}
			.div{
				position:fixed;
			}
		</style>
	</head>
	<body>
		<div id="snowzone" >
		</div>
	</body>
	<script>
		(function(){
			function snow(left,height,src){
				var div = document.createElement("div");
				var img = document.createElement("img");
				div.appendChild(img);
				img.className = "roll";
				img.src = src;
				div.style.left=left+"px";
				div.style.height=height+"px";
				div.className="div";
				document.getElementById("snowzone").appendChild(div);
				setTimeout(function(){
					document.getElementById("snowzone").removeChild(div);
				// console.log(window.innerHeight);
			},5000);
			}
			setInterval(function(){
				var left = Math.random()*window.innerWidth;
				var height = Math.random()*window.innerHeight;
				var src = "s"+Math.floor(Math.random()*2+1)+".png";//两张图片分别为"s1.png"、"s2.png"
				snow(left,height,src);
			},500);
		})();
	</script>
</html>

两张雪花图片：