css实现旋转的多彩圣诞树效果代码-html代码-BFW代码库

css实现旋转的多彩圣诞树效果代码

代码语言：html

所属分类：动画

代码描述：css实现旋转的多彩圣诞树效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	height:100vh;
	overflow:hidden;
	background:hsl(243,100%,12%);
	display:flex;
}
section {
	position:relative;
	-webkit-perspective:100vmin;
	perspective:100vmin;
	-webkit-perspective-origin:calc(50% - 40px) 50%;
	perspective-origin:calc(50% - 40px) 50%;
	width:50vw;
	height:100vh;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	display:flex;
	justify-content:center;
	align-items:center;
}
div {
	-webkit-animation:display-case 8000ms infinite linear;
	animation:display-case 8000ms infinite linear;
	display:flex;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
	height:80vmin;
	width:30vmin;
	position:relative;
}
.right {
	-webkit-perspective-origin:calc(50% + 40px) 50%;
	perspective-origin:calc(50% + 40px) 50%;
}
section p {
	height:60vmin;
	width:23vmin;
	background:linear-gradient(      90deg,hsl(var(--hue,143),var(--saturation,80%),18%),hsl(var(--hue,143),var(--saturation,80%),13%),hsl(var(--hue,143),var(--saturation,80%),8%)    );
	background:linear-gradient(      90deg,hsl(var(--hue,143),var(--saturation,80%),48%),hsl(var(--hue,143),var(--saturation,80%),43%),hsl(var(--hue,143),var(--saturation,80%),38%)    );
	position:absolute;
	left:50%;
	top:50%;
	margin:auto;
	-webkit-transform-origin:100% 50% 0vmin;
	transform-origin:100% 50% 0vmin;
	-webkit-transform:translate(-100%,-50%) rotateY(calc(var(--ry,0) * 360deg));
	transform:translate(-100%,-50%) rotateY(calc(var(--ry,0) * 360deg));
	-.........完整代码请登录后点击上方下载按钮下载查看