249 lines
12 KiB
CSS
249 lines
12 KiB
CSS
|
:root {
|
||
|
|
--base-size: 200px;
|
||
|
|
--base-height: 173px;
|
||
|
|
}
|
||
|
|
|
||
|
|
*, *::before, *::after {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #7a7b89;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
perspective: 600px;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shadow {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 200%;
|
||
|
|
background-image: radial-gradient(#000, transparent 60%);
|
||
|
|
transform: rotateX(90deg) translateZ(-100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.icosahedron {
|
||
|
|
position: relative;
|
||
|
|
width: var(--base-size);
|
||
|
|
height: 169px;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
animation: rotate 20s infinite linear;
|
||
|
|
}
|
||
|
|
@keyframes rotate {
|
||
|
|
from {
|
||
|
|
transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: rotateX(360deg) rotateY(0deg) rotateZ(-360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.triangle {
|
||
|
|
width: var(--base-size);
|
||
|
|
height: var(--base-height);
|
||
|
|
position: absolute;
|
||
|
|
opacity: 0.8;
|
||
|
|
clip-path: polygon(0 0, 50% 100%, 100% 0);
|
||
|
|
transform-origin: top;
|
||
|
|
background-color: #23205fa8;
|
||
|
|
--d: 138px;
|
||
|
|
--d: 138px;
|
||
|
|
--d: 138px;
|
||
|
|
--d: 138px;
|
||
|
|
--d: 138px;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(1) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(2) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(3) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(4) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(5) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(6) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(7) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(8) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(9) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(10) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(11) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(12) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(13) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(14) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(15) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(16) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(17) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(18) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(19) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(20) {
|
||
|
|
background-image: radial-gradient(white, white 20px, transparent 40px), radial-gradient(white, white 10px, transparent 30px), radial-gradient(white, white 10px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.3) 2px, transparent 30px);
|
||
|
|
background-size: 550px 550px, 50px 50px, 250px 250px, 150px 150px;
|
||
|
|
background-position: 0 0, 70px 100px, 60px 70px, 70px 100px;
|
||
|
|
box-shadow: -20px -20px 100px 0 black inset;
|
||
|
|
}
|
||
|
|
.triangle:nth-child(1) {
|
||
|
|
transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(-127deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(6) {
|
||
|
|
transform: rotateY(0.2turn) translateZ(var(--d)) rotateX(11deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(11) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.2turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(16) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.2turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(2) {
|
||
|
|
transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(-127deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(7) {
|
||
|
|
transform: rotateY(0.4turn) translateZ(var(--d)) rotateX(11deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(12) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.4turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(17) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.4turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(3) {
|
||
|
|
transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(-127deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(8) {
|
||
|
|
transform: rotateY(0.6turn) translateZ(var(--d)) rotateX(11deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(13) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.6turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(18) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.6turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(4) {
|
||
|
|
transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(-127deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(9) {
|
||
|
|
transform: rotateY(0.8turn) translateZ(var(--d)) rotateX(11deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(14) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.8turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(19) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(0.8turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(5) {
|
||
|
|
transform: rotateY(1turn) translateZ(var(--d)) rotateX(-127deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(10) {
|
||
|
|
transform: rotateY(1turn) translateZ(var(--d)) rotateX(11deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(15) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(1turn) translateZ(calc(var(--d) * -1)) rotateX(191deg);
|
||
|
|
}
|
||
|
|
.triangle:nth-child(20) {
|
||
|
|
bottom: calc(var(--base-height) * -1);
|
||
|
|
transform: rotateY(1turn) translateZ(calc(var(--d) * -1)) rotateX(53deg);
|
||
|
|
}
|