满天星

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="js/jquery-2.1.4.js"></script>
		<title>满天星</title>
	</head>
	<style>
		html,body{
			margin:0;
			padding:0;
			width:100%;
			height:100%;
			line-height:0;
			font-size:0;
		}
		svg{
			position: absolute;
			top:0;
			left: 50%;
			margin-left:-600px;
			background:#001122;
		}
	</style>

	<body>

		<svg width="1200px" height="900px" viewBox="-400 -300 800 600" preserveAspectRatio="xMidYMid slice">
			//星星的原形
			<defs>
				<polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="#fff"></polygon>
			</defs>
			<defs>
				<linearGradient id="tower" x1="0" y1="0" x2="1" y2="0">
					<stop offset="0" stop-color="#999"></stop>
					<stop offset="1" stop-color="#333"></stop>
				</linearGradient>
				<radialGradient id="light" cx="0.5" cy="0.5" r="0.5">
					<stop offset="0" stop-color="rgba(255,255,255,0.8)"></stop>
					<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
				</radialGradient>
				<clipPath id="light-mask">//灯光裁切
					<polygon points="0 0 -400 -15 -400 15" fill="rgba(255,0,0,0.5)">
						<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="10s" repeatCount="indefinite">
						</animateTransform>
					</polygon>
					<circle cx="0" cy="0" r="1.5"></circle>
				</clipPath>
			</defs>

			<g id="real">
				<g id="star-group"></g>
				<g id="moon-group">
					<mask id="moon-mask">//月亮蒙版
						<circle cx="-250" cy="-150" r="100" fill="white"></circle>
						<circle cx="-200" cy="-200" r="100" fill="black"></circle>
					</mask>
					<circle cx="-250" cy="-150" r="100" fill="yellow" mask="url(#moon-mask)"></circle>
				</g>
				<g id="light-tower" transform="translate(250,0)" translate>

					<polygon points="0 0 5 50 -5 50" fill="url(#tower)"></polygon>
					<ellipse cx="0" cy="0" rx="300" ry="100" fill="url(#light)" clip-path="url(#light-mask)"></ellipse>

				</g>
			</g>
			<g id="reflact" transform="translate(0,50)" mask="url(#fading)">
				<defs>
					<linearGradient id="fade" x1="0" y1="0" x2="0" y2="1">
						<stop offset="0" stop-color="rgba(255,255,255,0.3)"></stop>
						<stop offset="1" stop-color="rgba(255,255,255,0)"></stop>
					</linearGradient>
					<mask id="fading">//渐变色蒙版
						<rect x="-400" y="0" width="800" height="300" fill="url(#fade)"></rect>
					</mask>
				</defs>
				<use xlink:href="#real" transform="scale(1,-1) translate(0,-50)" />//引用use制作倒影

			</g>
			<line x1="-400" y1="50" x2="400" y2="50" stroke="white"></line>
		</svg>

		<script>
			$(function(){
				window.alert("hello world!")
			})
				var SVG_NS='http://www.w3.org/2000/svg';
				var XLINK_NS='http://www.w3.org/1999/xlink';
				var paper=document.querySelector('svg');

				renderStar();

				function use(origin){
					var _use=document.createElementNS(SVG_NS,'use');
					_use.setAttributeNS(XLINK_NS,'xlink:href','#'+ origin.id);
					return _use;
				}

				function random(min,max){
					return min+ (max-min)*Math.random();
				}  

				function renderStar(){
					var starRef=document.getElementById('star');
					var starGroup=document.getElementById('star-group');
					var starCount=500;
					var star;
					while(starCount--){
						star=use(starRef);
						star.setAttribute('opacity',random(0.1,0.5));
						star.setAttribute('transform','translate('+random(-400,400)+','+random(-300,50)+')' + 'scale('+random(0.1,0.6)+')' );
						starGroup.appendChild(star);
					}
				}
		</script>

		<div style="border: 1px solid red;">
			<details>
			<summary>这是一个隐藏域</summary>
			<code>
				  标签为页面上的所有链接规定默认地址或默认目标。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用  标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括  标签中的 URL。
			</code>
			</details>
		</div>

	</body>

</html>