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));
        -.........完整代码请登录后点击上方下载按钮下载查看