From a092bf479d96fd162116f0b5555f975f6841a6ab Mon Sep 17 00:00:00 2001
From: MrEidam <126872183+MrEidam@users.noreply.github.com>
Date: Sat, 16 Sep 2023 12:09:54 +0200
Subject: [PATCH] Add files via upload
---
index.html | 21 ++++++++++++
style.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 116 insertions(+)
create mode 100644 index.html
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8d226ea
--- /dev/null
+++ b/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ Cube
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a01485e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,95 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+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);}
+}
+@keyframes colr{
+ from{filter: hue-rotate(0deg);}
+ to{filter: hue-rotate(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);
+ animation: colr 4s linear infinite;
+}
+.top{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 300px;
+ height: 300px;
+ background: #222;
+ transform: rotateX(90deg) translateZ(150px);
+}
+.top::after{
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 300px;
+ height: 300px;
+ background: #00ec00;
+ transform: translateZ(-300px);
+ animation: colr 4s linear infinite;
+}
+.top::before{
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 300px;
+ height: 300px;
+ background: #0f0;
+ transform: translateZ(-380px);
+ 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),
+ 0 0 500px rgba(0,255,0,1);
+ animation: Bcolr 4s linear infinite;
+}
+
+@keyframes Bcolr{
+ from{filter: hue-rotate(0deg) blur(20px);}
+ to{filter: hue-rotate(360deg) blur(20px);}
+}
+
+@keyframes boxsha{
+ 0%{filter: drop-shadow(0 0 120px rgba(0,255,0,0.2));}
+ 25%{filter: drop-shadow(0 0 200px rgba(0,255,0,0.4));}
+ 50%{filter: drop-shadow(0 0 300px rgba(0,255,0,0.6));}
+ 100%{filter: drop-shadow(0 0 500px rgba(0,255,0,1));}
+}
\ No newline at end of file