圣诞树css样式表

最新推荐文章于 2023-12-05 13:54:14 发布

knowledge...

最新推荐文章于 2023-12-05 13:54:14 发布

阅读量1.5k

点赞数 4

分类专栏： java web

java web 专栏收录该内容

26 篇文章 2 订阅

订阅专栏

创建tree.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/domtree.css"/>
	</head>
	<body>
		<div class="tree">
			
		</div>
	</body>
	<script src="js/domtree.js" type="text/javascript" charset="utf-8"></script>
</html>

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;
}
/*********************************************
 * 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;
}

domtree.js文件


(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();

})()

knowledge...

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
圣诞树css样式表

创建tree.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/domtree.css"/> </head> <body> <div class="tree">
复制链接

扫一扫