-
Notifications
You must be signed in to change notification settings - Fork 3.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add: adds disco lights animation (#2881)
Co-authored-by: Laureline Paris <[email protected]>
- Loading branch information
1 parent
b972ec3
commit c2201f5
Showing
3 changed files
with
74 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "githubHandle": "shanolhere", | ||
| "artName": "discoLightsAnimation" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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;} | ||
| } | ||
|
|