<!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 （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#运行顺畅 #内容详尽 #全网独家 #注释完整 #完美解决问题
猰貐的新时代
- 粉丝: 1w+
- 资源: 3016
最新资源
- 基于mmse的不确定电力系统有限次测量的分析估计 源代码， matlab代码按照高水平文章复现，保证正确 大量可再生分布式能源的预期渗透正推动下一代电力系统走向不确定性，这可能对状态估计的可靠性和复杂
- 西南科技大学数据分析期末大作业.zip
- 西门子PLC1200立体库机器人码垛机伺服视觉AGV程序 包括2台西门子PLC1215程序和2台西门子触摸屏TP700程序 PLC和基恩士相机视觉定位Modbus TCP通讯（SCL语言） PLC和A
- 知名扫地机代码方案 某知名大厂扫地机代码 适合需要学习项目与代码规范的工程师 硬件驱动包含 陀螺仪姿态传感器bmi160、电源管理bq24733等 软件驱动包括 IIC、PWM、SPI、多路A
- siddhi-execution-json jar包用于在处理事件中对json字符串进行处理
- 直流充电桩，双枪控制板方案，需要的砸单
- 埃斯顿量产控制器 埃斯顿量产伺服控制器C代码和硬件图纸 1）TMS320F28335+FPGA全套代码；全C写的DSP代码，VHDL写的FPGA代码(Lattice MXO1200) 2）AD电
- 信捷XC PLC与西门子V20变频器通讯程序 原创可直接用于生产的程序，程序带注释，并附送触摸屏程序，有接线方式和设置，通讯地址说明等 程序采用轮询，可靠稳定 器件：信捷XC3的PLC，西门子V20
- 台达DVP ES系列PLC与3台英威腾GD变频器通讯 程序带注释，并附送昆仑通态和威纶通触摸屏程序，有接线方式，设置 器件：台达DVP ES系列的PLC，3台英威腾GD系列变频器，昆仑通态，威纶通触
- 控制系统的数学建模，被控对象的数学模型建立，simulink模型实现 提供四旋翼和带尾翼直升机，共轴式直升机的数学模型、simulink模型，推导 提供资料，文献 刚体飞行动力学模型，运动学模型
- 深度学习中的Fashion-MNIST数据集与卷积神经网络实现及其训练分析
- MPC控制器设计，模型预测控制，线性时变模型预测控制，LTV MPC，提供理论讲解与应用实现 提供MPC算法、LTV MPC 算法在直升机和四旋翼中的应用实例 提供模型预测控制资料 提供matl
- Flink Forward Asia 2024 上海站（脱敏）PPT合集.zip
- Node.js安装与环境配置指南：覆盖Windows、macOS及Linux系统全流程
- 微信小程序开发全流程详解：从准备到发布的全面指南与关键技术解析
- 斑马打印机C#控制程序源代码，适合自己进行二次开发 文档齐全，包括驱动程序和如何设置斑马打印机的说明文档 源代码可以打印条形码标签和二维码标签
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
