<!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
圣诞树源码html+css.zip
5星 · 超过95%的资源 需积分: 8 195 浏览量
2022-12-01
20:42:22
上传
评论
收藏 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资源评论
程序员张小妍2022-12-03完美解决问题，高质量资源，支持你
盈梓的博客2022-12-03#运行顺畅 #内容详尽 #全网独家 #注释完整 #完美解决问题
