github网址：github.com/xuhuihui/sv…
<!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>
复制代码
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
