超简单的HTML5圣诞树代码哦

最新推荐文章于 2023-12-08 16:00:00 发布
南城已旧
最新推荐文章于 2023-12-08 16:00:00 发布
阅读量8.6k
点赞数 10
文章标签： html5 前端 html
本文链接：https://blog.csdn.net/qq_45145993/article/details/122009549
版权
啥也不说，直接上代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/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;
}
/*********************************************
 * GLOBAL
 *********************************************/

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: -o-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
	background: -ms-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
	background: radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
}

/*********************************************
 * DOM TREE
 *********************************************/

@-webkit-keyframes spin {
 0% {
-webkit-transform: rotateY( 0deg );
}
 100% {
-webkit-transform: rotateY( 360deg );
}
}
 @-moz-keyframes spin {
 0% {
-moz-transform: rotateY( 0deg );
}
 100% {
-moz-transform: rotateY( 360deg );
}
}
 @-ms-keyframes spin {
 0% {
-ms-transform: rotateY( 0deg );
}
 100% {
-ms-transform: rotateY( 360deg );
}
}
 @-o-keyframes spin {
 0% {
-o-transform: rotateY( 0deg );
}
 100% {
-o-transform: rotateY( 360deg );
}
}
 @keyframes spin {
 0% {
transform: rotateY( 0deg );
}
 100% {
transform: rotateY( 360deg );
}
}
body {
	-webkit-perspective: 3000px;
	-moz-perspective: 3000px;
	-ms-perspective: 3000px;
	-o-perspective: 3000px;
	perspective: 3000px;
	-webkit-perspective-origin: 0 20%;
	-moz-perspective-origin: 0 20%;
	-ms-perspective-origin: 0 20%;
	-o-perspective-origin: 0 20%;
	perspective-origin: 0 20%;
}
.tree {
	margin: 0 auto;
	position: relative;
	-webkit-animation: spin 18s infinite linear;
	-moz-animation: spin 18s infinite linear;
	-ms-animation: spin 18s infinite linear;
	-o-animation: spin 18s infinite linear;
	animation: spin 18s infinite linear;
	-webkit-transform-origin: 50% 0;
	-moz-transform-origin: 50% 0;
	-ms-transform-origin: 50% 0;
	-o-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.tree * {
	position: absolute;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}


		</style>
	</head>
	<body>
		<div class="tree">
			
		</div>
	</body>
	<script>
		
(function() {

    var supports3DTransforms = document.body.style['perspectiveProperty'] !== undefined ||
        document.body.style['WebkitPerspective'] !== undefined ||
        document.body.style['MozPerspective'] !== undefined ||
        document.body.style['msPerspective'] !== undefined ||
        document.body.style['OPerspective'] !== undefined;

    if (!supports3DTransforms) {
        alert('Your browser doesn\'t support CSS3 3D transforms :/');
    }

    function transform(element, value) {
        element.style.WebkitTransform = value;
        element.style.MozTransform = value;
        element.style.msTransform = value;
        element.style.OTransform = value;
        element.style.transform = value;
    }

    var width = 500,
        height = 600,
        quantity = 250,
        types = ['text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox'],
        greetings = ['Joyeuses Fêtes', 'Felices Fiestas', 'God Jul', 'Boas Festas', 'Mutlu Bayramlar', 'Sarbatori Fericite', 'Jie Ri Yu Kuai', 'Bones Festes', 'Tanoshii kurisumasu wo', 'Buone Feste', 'Happy Holidays', 'Ii holide eximnandi', 'Frohe Feiertage', 'Prettige feestdagen', 'Beannachtaí na Féile', 'Vesele Praznike', 'Selamat Hari Raya', 'Sretni praznici'];

    var 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++) {
        var element = null,
            type = types[Math.floor(Math.random() * types.length)],
            greeting = greetings[Math.floor(Math.random() * greetings.length)];

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

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

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

        switch (type) {
            case 'button':
                element = document.createElement('button');
                element.textContent = greeting;
                element.style.width = elemenWidth + 'px';
                element.style.height = elemenHeight + 'px';
                break;
            case 'progress':
                element = document.createElement('progress');
                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.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.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 'radio':
                element = document.createElement('input');
                element.setAttribute('type', 'radio');
                if (Math.random() > 0.5) element.setAttribute('checked', '');
                break;
            case 'checkbox':
                element = document.createElement('input');
                element.setAttribute('type', 'checkbox');
                if (Math.random() > 0.5) element.setAttribute('checked', '');
                break;
            case 'text':
            default:
                element = document.createElement('input');
                element.setAttribute('type', 'text');
                element.setAttribute('value', greeting);
                element.style.width = elemenWidth + 'px';
                element.style.height = elemenHeight + 'px';
        }

        transform(element, 'translate3d(' + x + 'px, ' + y + 'px, 0px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) rotateZ(' + rz + 'deg)');

        tree.appendChild(element);
    }

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

        var spread = width * 2;

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

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

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

        transform(element, '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>
</html>
来看一下效果吧
在这里插入图片描述
这样一个简单的圣诞树就画好啦