满天星

来源：互联网发布：淘宝什么买家秀大尺度编辑：程序博客网时间：2024/05/16 02:07
<!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>
0 0