这课程有源代码的下载么？
有源代码的下载么？
3 回答
本节用到的代码，纯手工打造。。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Duang duang 气泡</title>
<link rel="stylesheet" href="css/duang.css"/>
<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="star-group">
</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();
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.4));
star.setAttribute('transform',
'translate(' + random(-400, 400) + ',' + random(-300, 50) + ')'
+
'scale('+random(0.1,0.6)+')' );
starGroup.appendChild(star);
}
}
</script>
</body>
</html>
举报
0/150
提交
取消
