课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

这课程有源代码的下载么？

来源：6-1 use标签创建图形引用

流浪的bug

2015-04-02 16:51

有源代码的下载么？

写回答 关注

3回答

  • 永不抹灭
    2016-04-20 22:59:26

    本节用到的代码，纯手工打造。。

    <!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 1
  • NaturelLee
    2015-05-15 11:02:24

    是所有的，不是一个一个的下载好麻烦

    1 0

    24k小清新

    请问到哪里下载所有的？

    2015-08-09 13:17:00

    共 1 条回复 >

  • 赫兹1719
    2015-04-02 17:14:36

    视频右下角位置有相关资料下载，注意看~~

    0 0

走进SVG

SVG是HTML5 中矢量图的标记语言，学习后掌握更多的干货

52639 学习 · 213 问题

查看课程

相似问题

求课程源码

回答 4

求老师上课demo的源代码

回答 1

为什么没有代码可以下载

回答 2

这节课是我听过最迷糊的 老师语速快 手速快 还没有源代码下载 想想也是醉了

回答 4

感觉源代码SVGEditor.html中有bug

回答 4

打开慕课网App查看更多内容