forked from xuhuihui/smallDemo
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
xuhuihui
committed
Mar 15, 2018
0 parents
commit e5be2b9
Showing
1 changed file
with
123 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>Document</title> | ||
| <style> | ||
| html, | ||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: #001122; | ||
| line-height: 0; | ||
| font-size: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <svg width="100%" height="100%" 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="white"></polygon> | ||
| </defs> | ||
| <!-- 湖面部分 --> | ||
| <g id="real"> | ||
| <!-- 星星背景 --> | ||
| <g id="star-group" width="100%" height="80%"></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)"> | ||
| <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,.8)"></stop> | ||
| <stop offset="1" stop-color="rgba(255,255,255,0)"></stop> | ||
| </radialGradient> | ||
| <!-- 光圈三角形路径 --> | ||
| <clipPath id="light-clip"> | ||
| <polygon points="0 0 -400 -15 -400 15" fill="rgba(255,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="2"></circle> | ||
| </clipPath> | ||
| </defs> | ||
| <!-- 灯塔 --> | ||
| <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-clip)"></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="0.5" 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> | ||
| <line x1="-400" y1="0" x2="400" y2="0" stroke="white"></line> | ||
| </g> | ||
| </svg> | ||
| <script> | ||
| var SVG_NS = 'http://www.w3.org/2000/svg'; | ||
| var XLINK_NS = 'http://www.w3.org/1999/xlink' | ||
| var paper = document.querySelector('svg'); | ||
| renderStar(); | ||
| // 创建引用的use标签 | ||
| 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'); | ||
| // console.log(starRef) | ||
| var starGroup = document.getElementById('star-group'); | ||
| var starCount = 500; | ||
|
|
||
| var star; | ||
| while (starCount--) { | ||
| star = use(starRef); | ||
| //改变透明度，位置和大小 | ||
| star.setAttribute('opacity', random(0.1, 0.4)); | ||
| star.setAttribute('transform', 'translate(' + random(-400, 400) + ',' + random(-300, 300) + ')' | ||
| + 'scale(' + random(0.1, 0.6) + ')'); | ||
| starGroup.appendChild(star); //添加星星 | ||
| } | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
| </html> |