圣诞树代码

CSS代码（创建一个CSS文件夹里面创建一个名为domtree.css文件）:


html{color:#000;background:#222222;}
a{cursor:pointer;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
/* h1,h2,h3,h4,h5,h6{font-size:100%;} */
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
legend{color:#000;}
a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
/*input[type="Submit"]{cursor:pointer;}*/
strong {font-weight: bold;}
 
body, html {
	overflow: hidden;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 11px;
 
	width: 100%;
	height: 100%;
 
	background: #b72424;
	background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));
	background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
	background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
}
 
@keyframes spin {
	0% { transform: rotateY( 0deg ); }
	100% { transform: rotateY( 360deg ); }
}
 
body {
	perspective: 3000px;
	perspective-origin: 0 20%;
}
 
.tree {
	margin: 0 auto;
	position: relative;
	animation: spin 18s infinite linear;
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}
 
.tree * {
	position: absolute;
	transform-origin: 0 0;
}

Html+JS代码：

<!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 -->
    <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');
        const width = 500;
        const height = 600;
        const quantity = 150;
        const types = ['text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox'];
        const greetings = ['小可爱', '小可爱', 'Merry Christmas', 'Merry Christmas', 'Merry Christmas', 'Merry Christmas',
            '小可爱', '6月19', '小可爱', 'Merry Christmas', 'Happy Holidays', ' 小可爱', '8月13', '小可爱',
            'Merry Christmas', '小可爱', 'Merry Christmas', '小可爱'
        ];
        let tree = document.querySelector('.tree'),
            treeRotation = 0;

        tree.style.width = width + 'px';
        tree.style.height = height + 'px';

        window.addEventListener('resize', resize, false);

        // The tree
        for (var i = 0; i < quantity; i++) {
            let element = null,
                type = types[Math.floor(Math.random() * types.length)],
                greeting = greetings[Math.floor(Math.random() * greetings.length)];

            let x = width / 2,
                y = Math.round(Math.random() * height);

            let rx = 0,
                ry = Math.random() * 360,
                rz = -Math.random() * 15;

            let elemenWidth = 5 + ((y / height) * width / 2),
                elemenHeight = 26;

            switch (type) {
                case 'button':
                    element = document.createElement('button');
                    //可以修改任意喜欢的颜色
                    element.style.backgroundColor = "red";
                    element.textContent = greeting;
                    element.style.width = elemenWidth + 'px';
                    element.style.height = elemenHeight + 'px';
                    break;
                case 'progress':
                    element = document.createElement('progress');
                    //可以修改任意喜欢的颜色
                    element.style.backgroundColor = "yellow";
                    element.style.width = elemenWidth + 'px';
                    element.style.height = elemenHeight + 'px';
                    if (Math.random() > 0.5) {
                        element.setAttribute('max', '100');
                        element.setAttribute('value', Math.round(Math.random() * 100));
                    }
                    break;
                case 'select':
                    element = document.createElement('select');
                    //可以修改任意喜欢的颜色
                    element.style.backgroundColor = "yellow";
                    element.setAttribute('selected', greeting);
                    element.innerHTML = '<option>' + greetings.join('</option><option>') + '</option>';
                    element.style.width = elemenWidth + 'px';
                    element.style.height = elemenHeight + 'px';
                    break;
                case 'meter':
                    element = document.createElement('meter');
                    //可以修改任意喜欢的颜色
                    element.style.backgroundColor = "blue";
                    element.setAttribute('min', '0');
                    element.setAttribute('max', '100');
                    element.setAttribute('value', Math.round(Math.random() * 100));
                    element.style.width = elemenWidth + 'px';
                    element.style.height = elemenHeight + 'px';
                    break;
                case 'text':
                default:
                    element = document.createElement('input');
                    //可以修改任意喜欢的颜色
                    element.style.backgroundColor = "pink";
                    element.setAttribute('type', 'text');
                    element.setAttribute('value', greeting);
                    element.style.width = elemenWidth + 'px';
                    element.style.height = elemenHeight + 'px';
            }

            element.style.transform =
                `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

            tree.appendChild(element);
        }

        // Let it snow
        for (var i = 0; i < 200; i++) {
            let element = document.createElement('input');
            element.setAttribute('type', 'radio');

            let spread = window.innerWidth / 2;

            let x = Math.round(Math.random() * spread) - (spread / 4),
                y = Math.round(Math.random() * height),
                z = Math.round(Math.random() * spread) - (spread / 2);

            let rx = 0,
                ry = Math.random() * 360,
                rz = 0;

            if (Math.random() > 0.5) element.setAttribute('checked', '');

            element.style.transform =
                `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

            tree.appendChild(element);
        }

        function resize() {
            tree.style.top = ((window.innerHeight - height - 100) / 2) + 'px';
        }

        resize();
    </Script>

</body>

</html>

效果图：

猜你喜欢