圣诞树css样式表

最新推荐文章于 2025-09-18 08:00:00 发布
翻译 最新推荐文章于 2025-09-18 08:00:00 发布 · 1.6k 阅读 · 11

本文介绍了一个使用HTML、CSS和JavaScript创建的动态DOM树，通过旋转效果展示数据节点，结合CSS3动画实现沉浸式用户体验。内容包括树形结构的HTML布局、CSS样式设计和JavaScript交互逻辑。

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

})()
Python——画一棵漂亮的樱花树（不同种樱花+玫瑰+圣诞树喔）
碎片
10-22 57万+
最近翻到一篇知乎，上面有不少用Python（大多是turtle库）绘制的树图，感觉很漂亮，我整理了一下，挑了一些我觉得不错的代码分享给大家（这些我都测试过，确实可以生成） one 樱花树 动态生成樱花 效果图（这个是动态的）： 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
圣诞树html网页代码实操代码详解
zhaoshanshan168的博客
10-27 7267
圣诞树
HTML5 canvas 绘图例子(圣诞树)
02-03
《HTML5高级程序设计》教程中 关于讲解Canvas 的案例源代码。包括曲线，直线，阴影，渐变，画字等
HTML旋转圣诞树
最新发布
Python、C++、HTML、Java
09-18 4232
程序员用HTML与CSS打造动态旋转圣诞树，融合音乐、动画与响应式设计，以代码传递节日温暖。
linux 终端打印圣诞树,1021字节javascript写成的3D圣诞树
weixin_33390343的博客
05-07 1440
源码如下：JS1k, 1k demo submission [856]var b = document.body;var c = document.getElementsByTagName('canvas')[0];var a = c.getContext('2d');document.body.clientWidth; // fix bug in chrome.// start of subm...
程序员的浪漫------下雪氛围圣诞树源码
weixin_64050318的博客
01-19 6万+
氛围圣诞树，雪花和圣诞树灯光会随音乐节奏闪动，音乐可自主选择，什么歌曲都可以
发光闪烁圣诞树CSS3特效
04-06
发光闪烁圣诞树CSS3特效是一种利用CSS3的强大功能来创建的动态视觉效果，适用于节日装饰或网站背景。在本文中，我们将深入探讨如何利用CSS3的特性制作这种特效，以及涉及的相关技术点。 首先，CSS3是层叠样式表的第...
纯css3D圣诞树源码
12-07
`static`目录可能包含了CSS样式表和其他资源文件，如图片或字体。通过查看和分析这些文件，我们可以更深入地理解这个项目的实现原理。 总之，“纯css3D彩带圣诞树”是一个展示CSS3强大功能的实例，它通过灵活运用3D...
html+css实现圣诞树效果！
12-22
CSS是用于控制网页外观和布局的样式表语言。在“ChristmasTree-master”项目中，CSS将发挥关键作用，实现圣诞树的颜色、形状、动画等视觉效果。 1. **形状与尺寸**：通过`width`、`height`、`border-radius`等属性...
卡通彩色圣诞树CSS3特效.zip
10-15
【标题】"卡通彩色圣诞树CSS3特效.zip"是一个包含CSS3实现的动态圣诞树效果的资源包。这个特效适用于网页设计，特别是圣诞节主题的网站，可以为网页增添节日氛围。CSS3是一种强大的样式表语言，它扩展了CSS2，引入了...
CSS3卡通圣诞树动画特效
07-24
在网页设计领域，CSS3（层叠样式表第三版）的出现为开发者带来了丰富的动画效果和更强大的样式控制能力。本篇将深入探讨如何利用CSS3来创建一款充满节日气氛的卡通圣诞树动画特效。 首先，我们要了解CSS3中的关键帧...
html5作的圣诞树
07-21
这是一个用html5写的代码，非常漂亮的圣诞树
html5写的一个简单的3D圣诞树
01-12
使用html5编写的一个简单的3D圣诞树网页，希望能有所帮助
运用HTML5 Canvas绘图生成圣诞树特效.rar
07-10
运用HTML5 Canvas绘图生成圣诞树特效，虽然圣诞节还没有来，但是看到这款HTML5制作的圣诞树效果，我迫不及待的将它分享给大家，实在是很佩服作者的水平，也很羡慕别人能驾驭HTML5，我只能望而兴叹了，还需要不断努力哦。
圣诞树HTML.html
12-17
圣诞树HTML，下载点击即可使用，表白神器
网页圣诞树
01-09
最近看见大家都在找3D圣诞树的代码，鉴于需要的人太多，无法一一发送，今天我整理的一下，希望对大家有所帮助: 感觉整理的可以的可以回个帖支持一下啊: 先声明一下，该文件在IE中无法运行，FireFox中运行很慢，特别耗CPU，最佳浏览器为Chorm急速浏览器，建议安装Google的浏览器或者360极速浏览器。 具体代码如下: 使用方法，将一下代码复制到文本文档中，让后将文本文档的后缀改成.html就可以运行查看效果了。
HTML5实现圣诞树效果
热门推荐
web开发自学
03-03 7万+
下面的代码只有在支持HTML5下的浏览器中运行！！&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;html5写的3D逼真圣诞树效果&lt;/titl
HTML 圣诞树效果
chen193717的博客
12-17 5223
在这<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>圣诞树效果</title> <meta charset="utf-8" > <style> html, body { width: 100%; height: 100%; mar
程序员的浪漫圣诞树
田田云逸的博客
12-16 7403
环境：win10+python3.8.8 import turtle as t #as就是取个别名，后续调用的t都是turtle from turtle import * import random as r import time n = 100.0 speed("fastest") #定义速度 screensize(bg='black') #定义背景颜色，可以自己换颜色 left(90) forward(3*n) color("orange", "yellow")#定义最上端星
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值