乐趣区

关于python:200行Html5CSS3JS代码实现动态圣诞树

<!DOCTYPE html>
<html lang=”en”>

<head>
    <meta charset="utf-8">
    <meta name="description" content="A Christmas tree built out of form elements." />
    <meta name="author" content="Hakim El Hattab" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>DOM Tree</title>
    <link href="css/domtree.css" rel="stylesheet" media="screen" />
    <link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="tree"></div>
    <script src="js/domtree.js"></script>
    <!-- Third party scripts and sharing UI -->
    <p class="project-title">DOM Tree</p>
    <div class="credits">
        <a href="https://blog.csdn.net/qq_53673551?spm=1000.2115.3001.5343"> 知心宝贝 </a>
        <a href="https://twitter.com/hakimel">[钯金](https://www.gendan5.com/nmetal/palladium.html) 文章代码参考 @hakimel</a>
    </div>
    <style type="text/css" media="screen">
        .project-title {
            position: absolute;
            left: 25px;
            bottom: 20px;
            font-size: 16px;
            color: #fff;
        }
        .credits {
            position: absolute;
            right: 20px;
            bottom: 25px;
            font-size: 15px;
            z-index: 20;
            color: #fff;
            vertical-align: middle;
        }
        .credits * + * {margin-left: 15px;}
        .credits a {
            padding: 8px 10px;
            color: rgba(255,255,255,0.7);
            border: 2px solid rgba(255,255,255,0.7);
            text-decoration: none;
        }
        .credits a:hover {
            border-color: #fff;
            color: #fff;
        }
        @media screen and (max-width: 1040px) {
            .project-title {display: none;}
            .credits {
                width: 100%;
                left: 0;
                right: auto;
                bottom: 0;
                padding: 30px 0;
                background: #b72424;
                text-align: center;
            }
            .credits a {
                display: inline-block;
                margin-top: 7px;
                margin-bottom: 7px;
            }
        }
    </style>
    <script>
        var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
        (function(d, t) {var g = d.createElement(t),
            s = d.getElementsByTagName(t)[0];
        g.async = true;
        g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g, s);
        })(document, 'script');
    </script>
</body>

</html>

退出移动版