<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣诞树</title>
<style>
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('你的浏览器竟然不支持css3d！？');
}
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'];
greetings = [''];
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
圣诞树源码圣诞树.zip
5星 · 超过95%的资源 需积分: 9 11 浏览量
2022-12-02
07:34:32
上传
评论 1
收藏 3.34MB ZIP 举报 
圣诞树源码.zip （6个子文件） 
christmas-trees-master 
圣诞树4.html 10KB 圣诞树.html 658B 圣诞树3.html 2KB
送你一棵圣诞树.exe 1.12MB 圣诞树2.html 9KB 发了圣诞树给你，嘻嘻.exe 3.17MB 3 资源评论
盈梓的博客2022-12-03#注释完整 #全网独家 #内容详尽 #完美解决问题
