{"html":"

\n \n \n \n \n

\n \n

","css":".container {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.tree {\n position: relative;\n width: 50px;\n height: 50px;\n transform-style: preserve-3d;\n transform: rotateX(-20deg) rotateY(30deg);\n animation: treeAnimate 5s linear infinite;\n}\n\n@keyframes treeAnimate {\n 0% {\n transform: rotateX(-20deg) rotateY(360deg);\n }\n\n 100% {\n transform: rotateX(-20deg) rotateY(0deg);\n }\n}\n\n.tree div {\n position: absolute;\n top: -50px;\n left: 0;\n width: 100%;\n height: 100%;\n transform-style: preserve-3d;\n transform: translateY(calc(25px * var(--x))) translateZ(0px);\n}\n\n.tree div.branch span {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, #69c069, #77dd77);\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n border-bottom: 5px solid #00000019;\n transform-origin: bottom;\n transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);\n}\n\n.tree div.stem span {\n position: absolute;\n top: 110px;\n /* updated top value */\n left: calc(50% - 7.5px);\n width: 15px;\n height: 50%;\n background: linear-gradient(90deg, #bb4622, #df7214);\n border-bottom: 5px solid #00000019;\n transform-origin: bottom;\n transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);\n}\n\n.shadow {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.4);\n filter: blur(20px);\n transform-style: preserve-3d;\n transform: rotateX(90deg) translateZ(-65px);\n}\n"}

jolly-newt-35

👁 实时预览

📝 源代码