add: adds disco lights animation (#2881)

shanolhere · LaurelineP · web-flow · commit c2201f530e6f · 2024-11-01T09:54:54.000+01:00
Co-authored-by: Laureline Paris &lt;32878345+LaurelineP@users.noreply.github.com&gt;
diff --git a/Art/shanolhere-discoLightsAnimation/index.html b/Art/shanolhere-discoLightsAnimation/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Disco Lights Animation</title>    
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <p>DISCO<br>LIGHTS</p>
+</body>
+</html>
diff --git a/Art/shanolhere-discoLightsAnimation/meta.json b/Art/shanolhere-discoLightsAnimation/meta.json
@@ -0,0 +1,4 @@
+{
+    "githubHandle": "shanolhere",
+    "artName": "discoLightsAnimation"
+}
diff --git a/Art/shanolhere-discoLightsAnimation/styles.css b/Art/shanolhere-discoLightsAnimation/styles.css
@@ -0,0 +1,58 @@
+
+body{  
+    -webkit-perspective: 500px; 
+    perspective: 500px;
+    background: black;
+}
+
+p{
+    color:black;    
+    width:420px;
+    height:250px;    
+    font-family: 'Oswald', sans-serif;
+    font-size:9em;
+    line-height:1;
+    margin:0;
+    padding:0;    
+    -webkit-transform: rotateX(25deg) rotateY(20deg) rotateZ(-3deg); 
+    transform: rotateX(25deg) rotateY(20deg) rotateZ(-3deg);      
+    position:absolute;
+    left:50%;
+    top:50px;
+    margin-left:-180px;    
+    -webkit-animation: anim 3s;
+    -webkit-animation-timing-function: linear;
+    -webkit-animation-iteration-count:infinite;
+    animation: anim 3s;
+    animation-timing-function: linear;
+    animation-iteration-count:infinite;
+}
+  
+@-webkit-keyframes anim {
+      0%{text-shadow:-6px 4px 0px red;}
+      10% {text-shadow:4px -6px 0px green;}
+      20% {text-shadow:-9px 4px 0px blue;}
+      30% {text-shadow:4px -6px 0px yellow;}
+      40% {text-shadow:-8px 4px 0px orange;}
+      50% {text-shadow:4px 5px 0px purple;}
+      60% {text-shadow:-6px 4px 0px brown;}
+      70% {text-shadow:4px 7px 0px pink;}
+      80% {text-shadow:-9px -4px 0px lime;}
+      90% {text-shadow:4px -6px 0px cyan;}
+      100% {text-shadow:-9px 4px 0px teal;}
+} 
+  
+@keyframes anim {
+      0%{text-shadow:-6px 4px 0px red;}
+      10% {text-shadow:4px -6px 0px green;}
+      20% {text-shadow:-9px 4px 0px blue;}
+      30% {text-shadow:4px -6px 0px yellow;}
+      40% {text-shadow:-8px 4px 0px orange;}
+      50% {text-shadow:4px 5px 0px purple;}
+      60% {text-shadow:-6px 4px 0px brown;}
+      70% {text-shadow:4px 7px 0px pink;}
+      80% {text-shadow:-9px -4px 0px lime;}
+      90% {text-shadow:4px -6px 0px cyan;}
+      100% {text-shadow:-9px 4px 0px teal;}
+} 
+  

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +{
 +    "githubHandle": "shanolhere",
 +    "artName": "discoLightsAnimation"
 +}