CSS3实现雪花飘落动画_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3实现雪花飘落动画_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:01 AM

<html><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">	<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">	<meta name="apple-mobile-web-app-capable" content="yes">	<meta name="format-detection" content="telephone=no, email=no">	<title>snowflake</title>	<script type="text/javascript" src="http://w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>	<style type="text/css">		body {			padding: 0;			margin: 0;			background-color: #333;			font-size: 14px;			color: #BCBCBC;		}		input {			border: solid 0px #DDD;			border-radius: 5px;			padding: 5px 10px;			width: 120px;		}		button {			border: solid 0px #CCC;			border-radius: 5px;			background-color: #FFF;			padding: 5px 10px;		}		#sky {			width: 100%;			max-width: 640px;			height: 100%;			background-color: #A39;			margin: 0 auto;			position: relative;    		overflow: hidden;		}		.snowflake {			width: 50px;			height: 50px;			border-radius: 50px;			background-color: rgba(255, 255, 255, 0.5);			position: absolute;			top: 10px;			left: 100px;			display: inline-block;			transition: top 2s;			-moz-transition: top 2s;/* Firefox 4 */			-webkit-transition: top 2s;/* Safari 和 Chrome */			-o-transition: top 2s;			transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);			-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);			-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);			-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);		}		#operate {			text-align: right;		}		#operate div {			margin: 10px;		}	</style></head><body>	<div id="sky"></div>	<div id="operate">		<div>			<label>下雪频率(ms): <input name="rate" type="number" min="1" /></label>		</div>		<div>			<label>融化时间(ms): <input name="melt" type="number" min="0" /></label>		</div>		<div>			<button id="start-or-stop" onclick="startOrStop()">start</button>		</div>	</div>	<script type="text/javascript">	var $sky = $('#sky');	var maxTop = $sky.height() - 5;// 地面高度值(px)	var rate = 60;// 飘落频率(ms)	var flakeSize = 10;// 单片雪花宽高值(px)	var melt = 2000;// 融化时间(ms)	// 初始化雪花	function snowflake(size, alpha, top, left) {		var s = document.createElement('div');		$(s).css({			'width': size,			'height': size,			'border-radius': size,			'background-color': 'rgba(255,255,255,' + alpha + ')',			'top': -50,			'left': left,		}).addClass('snowflake');		return s;	}	// 雪花飘落并融化	function dift($s) {		$s.css('top', maxTop + (flakeSize - $s.width()) / 2);		setTimeout(function() {			$s.remove();		}, 2000 + melt);	}	// 开始动画	var animateId = -1;	var it = false;	function start() {		if(!it) {			it = setInterval(function() {				// 初始化雪花				var id = 's_' + (++animateId);				var size = Math.random() * flakeSize + 2;				var alpha = Math.random() * 0.7 + 0.1;				var left = Math.random() * $(window).width();				var s = snowflake(size, alpha, 0, left);				var $s = $(s).attr('id', id);				$sky.get(0).appendChild(s);				// 雪花飘落				setTimeout(function() {					dift($s);				}, 100);				if(animateId > 10000) {// 避免越界					animateId = 0;				}			}, rate);			$('#start-or-stop').html('stop');		}	}	start();	// 停止动画	function stop() {		clearInterval(it);		it = false;		$('#start-or-stop').html('start');	}	// 开始或暂停动画	function startOrStop() {		if(!it) {			start();		} else {			stop();		}	}	// 重启动画	function restart() {		stop();		start();	}	$(function() {		// 监听rate输入框		var minRate = 1, maxRate = 3000;		$('input[name="rate"]').val(rate).on('change', function() {			rate = parseInt($(this).val());			if(rate < minRate) {				rate = minRate;				$(this).val(rate);			} else if(rate > maxRate) {				rate = maxRate;				$(this).val(rate);			}			restart();		}).prop({			min: minRate,			max: maxRate		});		// 监听melt输入框		var minMalt = 0, maxMelt = 100000;		$('input[name="melt"]').val(melt).on('change', function() {			melt = parseInt($(this).val());			if(melt < minMalt) {				melt = minMalt;				$(this).val(melt);			} else if(melt > maxMelt) {				melt = maxMelt;				$(this).val(melt);			}			restart();		}).prop({			min: minMalt,			max: maxMelt		});	});	</script></body></html>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

＆lt; datalist＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:33 PM

本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159

＆gt; gt;的目的是什么元素？Mar 21, 2025 pm 12:34 PM

本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati

＆lt; meter＆gt;的目的是什么。元素？Mar 21, 2025 pm 12:35 PM

本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前

视口元标签是什么？为什么对响应式设计很重要？Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。

＆lt; iframe＆gt;的目的是什么。标签？使用时的安全考虑是什么？Mar 20, 2025 pm 06:05 PM

本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。

我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？Mar 12, 2025 pm 04:05 PM

本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit

如何使用HTML5表单验证属性来验证用户输入？Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么？Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践，重点是特征检测，进行性增强和测试方法。

See all articles

热AI工具

热工具

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），