啥也不说，直接上代码吧
<!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>
来看一下效果吧
这样一个简单的圣诞树就画好啦
更多推荐
超简单的HTML5圣诞树代码哦
发布评论