15.html+css网页设计实例/“表白”主题介绍/360°环绕旋转生日蛋糕树完整代码/

前言

本文以"表白"为主题设计，应用html+css代码制作。360°环绕旋转效果的蛋糕的完整代码，分享给大家！

【关注作者 |获取更多源码（2000+个Web案例源码 ）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！

一、网页效果

二、代码展示

完整代码展示如下：

1.HTML

<!DOCTYPE html>

<head>

</head>

<body>

<main>

</ul>

</ul>

</ul>

</ul>

</ul>

</ul>

</ul>

</ul>

</main>

</body>

</html>

2.CSS

:root {

--unit: 1.6vmin;

--width: calc(var(--unit) * 6);

--height: calc(var(--unit) * 8);

}

ul, li {

position: absolute;

width: var(--width);

height: var(--height);

top: 50%;

left: 50%;

transform: translate(-50%, -50%) var(--transform, translate(0,0));

transform-style: preserve-3d;

z-index: -1;

}

li {

background: hsl(calc(var(--i) * 360 / var(--t)), 100%, 53%);

background: radial-gradient(circle, hsl(216, 88%, 86%) 22%, hsl(216, 88%, 26%) 22%) top center;

background-size: calc(var(--unit) * 1.5) calc(var(--unit) * 1.5);

--clip-path: polygon(0% 100%, 50% 0%, 100% 100%);

--transform: rotateY(calc(var(--i) * calc(360deg / var(--t)))) translateZ(calc(var(--width) * .09 * var(--t))) rotateX(0deg);

transform-origin: 50% 100%;

-webkit-clip-path: var(--clip-path);

clip-path: var(--clip-path);

}

li:nth-of-type(even) {

--clip-path: polygon(0% 0%, 50% 100%, 100% 0%);

}

li:nth-of-type(6n + 2) {

background: linear-gradient(to right, hsl(343, 88%, 56%) 50%, hsl(343, 88%, 36%) 50%);

}

li:nth-of-type(6n + 3) {

background-image: linear-gradient(to bottom, hsl(143, 70%, 18%) 0vmin, hsl(143, 70%, 18%) 1.8vmin, hsl(143, 70%, 78%) 1.8vmin, hsl(143, 70%, 78%) 2vmin);

}

li:nth-of-type(6n + 4) {

background:

repeating-linear-gradient(135deg, hsla(347, 88%, 76%, 0) 0, hsla(347, 88%, 76%, 0) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * .75), hsl(223, 88%, 46%) calc(var(--unit) * 1.5)),

repeating-linear-gradient(45deg, hsl(347, 88%, 46%) 0, hsl(347, 88%, 46%) var(--unit), hsl(143, 38%, 36%) var(--unit), hsl(143, 38%, 36%) calc(var(--unit) * 1.5));

background-size: contain;

}

li:nth-of-type(6n + 5) {

background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%);

}

li:nth-of-type(6n + 6) {

--color: hsl(243, 8%, 86%);

--alt: hsl(342, 88%, 46%);

background: linear-gradient(to right, var(--color) 50%, hsl(243, 8%, 66%) 50%);

}

@supports ( background-image: repeating-conic-gradient(at 50% 36%, red 30deg, red 45deg, green 45deg, green 60deg)) {

li:nth-of-type(6n + 6) {

background-image:

repeating-conic-gradient(at 50% 36%,

var(--color) 30deg,

var(--color) 45deg,

var(--alt) 45deg,

var(--alt) 60deg);

}

ul {

top: 8vmin;

animation: display-case calc(var(--t) * 1000ms) infinite linear;

animation-direction: var(--direction, normal);

animation-delay: -10000ms;

}

.star {

animation-duration: calc(var(--t) * 4000ms);

}

.star li {

--clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

--transform: translateY(-4vmin);

background: linear-gradient(to right, hsl(43, 88%, 36%) 50%, hsl(43, 88%, 56%) 50%);

}

@keyframes display-case {

0% {

transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit)));

}

100% {

transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit)));

}

@keyframes topsy-turvy {

0% {

transform: translate(-50%, -100%) rotateY(0deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg);

}

50% {

transform: translate(-50%, -100%) rotateY(180deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(5deg);

}

100% {

transform: translate(-50%, -100%) rotateY(360deg) translateY(calc(var(--v, 0) * 6 * var(--unit))) rotateZ(-5deg);

}

main {

width: 100vmin;

height: 100vmin;

transform-style: preserve-3d;

}

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

perspective: 120vmin;

background: hsl(216, 80%, 12%);

background-image: radial-gradient(circle at 50% 55%, hsl(216, 80%, 32%), hsl(216, 80%, 22%) 24vmin, hsl(216, 80%, 12%) 44vmin);

}

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

}