Merge pull request #2878 from VoidedCrystal/master

Added A Disco ball animation
zero-to-mastery · Oct 31, 2024 · 2ec2e96 · 2ec2e96
2 parents 667b1a3 + ef01d5b
commit 2ec2e96
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/Art/Voidedcrystal-disco/index.html b/Art/Voidedcrystal-disco/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Untitled Document</title>
+		<link rel="stylesheet" href="styles.css">
+	</head>
+
+	<body>
+		<div></div>
+
+	</body>
+</html>
diff --git a/Art/Voidedcrystal-disco/meta.json b/Art/Voidedcrystal-disco/meta.json
@@ -0,0 +1,4 @@
+{
+  "artName": "Disco Ball",
+  "githubHandle": "VoidedCrystal"
+}
diff --git a/Art/Voidedcrystal-disco/styles.css b/Art/Voidedcrystal-disco/styles.css
@@ -0,0 +1,73 @@
+/* CSS Document */
+body {
+	background: black;
+
+}
+
+div {
+	background: gray;
+	position: absolute;
+	left: 48%;
+	top: 40%;
+	width: 200px;
+	height: 200px;
+	border-radius: 100%;
+	box-shadow: 
+		inset 0 0 50px #fff,      
+    	inset 20px 0 80px #f0f,   
+    	inset -20px 0 80px #0ff,  
+    	inset 20px 0 300px #f0f,  
+    	inset -20px 0 300px #0ff, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #f0f,        
+    	10px 0 80px #0ff;       
+	animation-name: disco;
+	animation-duration: 4s;
+  	animation-iteration-count: infinite;
+
+}
+
+
+@keyframes disco{
+	0% {box-shadow: inset 0 0 50px #fff,      
+    	inset 20px 0 80px #f0f,   
+    	inset -20px 0 80px #0ff,  
+    	inset 20px 0 300px #f0f,  
+    	inset -20px 0 300px #0ff, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #f0f,        
+    	10px 0 80px #0ff;}
+	25% {box-shadow: inset 0 0 50px #fff,      
+    	inset 20px 0 80px #9900ff,   
+    	inset -20px 0 80px #9966ff,  
+    	inset 20px 0 300px #9900ff,  
+    	inset -20px 0 300px #9966ff, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #9900ff,        
+    	10px 0 80px #9966ff;}
+	50% {box-shadow:
+		inset 0 0 50px #fff,      
+    	inset 20px 0 80px #0ff,   
+    	inset -20px 0 80px #f0f,  
+    	inset 20px 0 300px #0ff,  
+    	inset -20px 0 300px #f0f, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #0ff,        
+    	10px 0 80px #f0f;}
+	75% {box-shadow: inset 0 0 50px #fff,      
+    	inset 20px 0 80px #9966ff,   
+    	inset -20px 0 80px #9900ff,  
+    	inset 20px 0 300px #9966ff,  
+    	inset -20px 0 300px #9900ff, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #9966ff,        
+    	10px 0 80px #9900ff;}
+	100% {box-shadow: inset 0 0 50px #fff,      
+    	inset 20px 0 80px #f0f,   
+    	inset -20px 0 80px #0ff,  
+    	inset 20px 0 300px #f0f,  
+    	inset -20px 0 300px #0ff, 
+    	0 0 50px #fff,            
+    	-10px 0 80px #f0f,        
+    	10px 0 80px #0ff;}
+	}