課程
/前端開發
/Html5
/走進SVG
有源代碼的下載么？
2015-04-02
源自：走進SVG 6-1
正在回答
本節用到的代碼，純手工打造。。
<!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>
是所有的，不是一個一個的下載好麻煩
24k小清新
視頻右下角位置有相關資料下載，注意看~~
舉報
SVG是HTML5 中矢量圖的標記語言，學習后掌握更多的干貨
3 回答怎么下載課程代碼
4 回答求課程源碼
1 回答請問哪里有源碼下載呢
1 回答求老師上課demo的源代碼
2 回答為什么沒有代碼可以下載
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-04-20
本節用到的代碼，純手工打造。。
<!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>
2015-05-15
是所有的，不是一個一個的下載好麻煩
2015-04-02
視頻右下角位置有相關資料下載，注意看~~