Eidam/Color-Cube
1
0
Fork 0
mirror of https://github.com/MrEidam/Color-Cube.git synced 2026-06-28 15:39:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

V1

Browse Source
This commit is contained in:
MrEidam
2023-09-02 23:51:46 +02:00
commit 59ac548eeb
4 changed files with 204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
style.css Normal file
View File

@@ -0,0 +1,109 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
transition: 0.5s;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #050505;
}
.cube{
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: animate 4s linear infinite;
}
@keyframes animate{
from{transform: rotateX(-30deg) rotateY(0deg);}
to{transform: rotateX(-30deg) rotateY(360deg);}
}
.cube div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.cube div span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#151515, #00ec00);
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
.top{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
transition: 0.5s;
}
.after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: var(--color,#00ec00);
transform: rotateX(90deg) translateZ(-150px);
}
.before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: var(--color,#0f0);
transform: rotateX(90deg) translateZ(-230px);
filter: blur(20px);
box-shadow: 0 0 120px rgba(0,255,0,0.2),
0 0 200px rgba(0,255,0,0.4),
0 0 300px rgba(0,255,0,0.6),
0 0 400px rgba(0,255,0,0.8);
transition: 0.5s;
}
.colors{
position: absolute;
top: 0;
padding: 0px 15px 5px 15px;
background: #444;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
filter: drop-shadow(0 0 20px #888);
border-radius: 0 0 50px 50px;
}
.colors span{
position: relative;
width: 20px;
height: 20px;
background: var(--clr);
margin: 10px;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
}
.colors span:hover{
filter: brightness(0.5);
scale: 1.25;
transition: 0.5s;
}
.colors span.active{
filter: drop-shadow(2px 2px 4px #888);
scale: 1.5;
transition: 0.5s;
}