css实现三维下雪的圣诞树旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现三维下雪的圣诞树旋转动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
:root {
	--main-bg: #c2c2c2;
	--trunk-bg-1: #5e2100;
	--trunk-bg-2: #783e00;
	--leaves-bottom-bg-1: #0f980f;
	--leaves-bottom-bg-2: #3fc83f;
	--leaves-middle-bg-1: #1fa81f;
	--leaves-middle-bg-2: #4fd84f;
	--leaves-top-bg-1: #2fb82f;
	--leaves-top-bg-2: #5fe85f;
	--star-bg: #ffdd00;
	--shine-bg: #ffeb69;
	--snow-bg: #f2f2f2;
	--tree-width: 200px;
	--tree-height: 400px;
	--tree-rotate: -15deg;
	--trunk-width: 30px;
	--trunk-height: 400px;
	--trunk-angle: 4.3deg;
	--leaves-translate: 15px;
	--leaves-bottom-width: 100px;
	--leaves-bottom-height: 320px;
	--leaves-bottom-angle: 18.2deg;
	--leaves-middle-width: 80px;
	--leaves-middle-height: 220px;
	--leaves-middle-angle: 21.4deg;
	--leaves-top-width: 60px;
	--leaves-top-height: 140px;
	--leaves-top-angle: 25.5deg;
	--star-size: 20px;
}

html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	overflow: hidden;
}

.ts-3d {
	transform-style: preserve-3d;
}

.container {
	background-color: var(--main-bg);
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tree {
	width: var(--tree-width);
	height: var(--tree-height);
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(var(--tree-rotate));
}

.trunk,
.leaves-bottom,
.leaves-middle,
.leaves-top {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	animation: 10s tree-rotate linear infinite;
}

.trunk div {
	border-top: none;
	border-left: solid var(--trunk-width) transparent;
	border-right: solid var(--trunk-width) transparent;
	position: absolute;
	bottom: 0;
	left: calc(50% - var(--trunk-width));
	transform-origin: bottom;
}

.trunk div:nth-child(1) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
	transform: rotateX(var(--trunk-angle)) translateY(2px) translateZ(var(--trunk-width));
}

.trunk div:nth-child(2) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.trunk div:nth-child(3) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-1);
	transform: rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.trunk div:nth-child(4) {
	border-bottom: solid var(--trunk-height) var(--trunk-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1));
}

.leaves-bottom div {
	border-top: none;
	border-left: solid var(--leaves-bottom-width) transparent;
	border-right: solid var(--leaves-bottom-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-bottom-width));
	transform-origin: bottom;
}

.leaves-bottom div:nth-child(1) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
	transform: rotateX(var(--leaves-bottom-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-bottom-width));
}

.leaves-bottom div:nth-child(2) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-bottom div:nth-child(3) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1);
	transform: rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-bottom div:nth-child(4) {
	border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1));
}

.leaves-middle div {
	border-top: none;
	border-left: solid var(--leaves-middle-width) transparent;
	border-right: solid var(--leaves-middle-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-middle-width));
	transform-origin: bottom;
}

.leaves-middle div:nth-child(1) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
	transform: rotateX(var(--leaves-middle-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-middle-width));
}

.leaves-middle div:nth-child(2) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-middle div:nth-child(3) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1);
	transform: rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-middle div:nth-child(4) {
	border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1));
}

.leaves-top div {
	border-top: none;
	border-left: solid var(--leaves-top-width) transparent;
	border-right: solid var(--leaves-top-width) transparent;
	position: absolute;
	top: var(--star-size);
	left: calc(50% - var(--leaves-top-width));
	transform-origin: bottom;
}

.leaves-top div:nth-child(1) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
	transform: rotateX(var(--leaves-top-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-top-width));
}

.leaves-top div:nth-child(2) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
	transform: rotateY(90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

.leaves-top div:nth-child(3) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1);
	transform: rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

.leaves-top div:nth-child(4) {
	border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2);
	transform: rotateY(-90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1));
}

@keyframes tree-rotate {
	0%        { transform: rotateX(0deg) rotateY(0deg); }
	99.99999% { transform: rotateX(0deg) rotateY(359deg); }
}

.shadow {
	background-color: rgba(0, 0, 0, 0.8);
	width: calc(var(--leaves-bottom-width) * 2);
	height: calc(var(--leaves-bottom-width) * 2);
	filter: blur(calc(var(--leaves-bottom-width) / 2));
	position: absolute;
	bottom: calc(var(--leaves-bottom-width) * -1);
	left: calc(50% - var(--leaves-bottom-width));
	transform: rotateX(90deg) translateX(-50%);
	animation: 10s shadow-rotate linear infinite;
}

@keyframes shadow-rotate {
	0%        { transform: rotateX(-90deg) rotateZ(0deg.........完整代码请登录后点击上方下载按钮下载查看