-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into parallax-waves
- Loading branch information
Showing
7 changed files
with
108 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,3 @@ | ||
| # Captain America animation | ||
| <img src="./captain.png"> | ||
| by [JonathanAllisson](https://github.com/JonathanAllisson) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,19 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="./styles.css"> | ||
| <title>Captain America</title> | ||
| </head> | ||
| <body> | ||
| <svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <circle class="captain-america" cx="300" cy="300" r="268.5" fill="#E43030" stroke="#E43030" stroke-width="1"/> | ||
| <circle class="captain-america" cx="300" cy="300" r="218.5" fill="white" stroke="white" stroke-width="1"/> | ||
| <circle class="captain-america" cx="300" cy="300" r="168.5" fill="#E43030" stroke="#E43030" stroke-width="1"/> | ||
| <circle class="captain-america" cx="300" cy="300" r="118.5" fill="#367DE8" stroke="#367DE8" stroke-width="1"/> | ||
| <path class="captain-america" d="M298.589 188.335C299.065 187.013 300.935 187.013 301.411 188.335L326.817 258.789C327.443 260.524 329.063 261.702 330.907 261.761L405.764 264.152C407.168 264.196 407.745 265.974 406.636 266.836L347.481 312.77C346.024 313.901 345.405 315.806 345.918 317.577L366.777 389.51C367.168 390.859 365.656 391.957 364.493 391.168L302.527 349.103C301.002 348.067 298.998 348.067 297.473 349.103L235.507 391.168C234.344 391.957 232.832 390.859 233.223 389.51L254.082 317.577C254.595 315.806 253.976 313.901 252.519 312.77L193.364 266.836C192.255 265.974 192.832 264.196 194.236 264.152L269.093 261.761C270.937 261.702 272.557 260.524 273.183 258.789L298.589 188.335Z" fill="white" stroke="white" stroke-width="1"/> | ||
| </svg> | ||
| </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,34 @@ | ||
| body { | ||
| width: 100%; | ||
| height: 100vh; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| background: #0f5ccf; | ||
| } | ||
|
|
||
| .captain-america{ | ||
| fill-opacity: 0; | ||
|
|
||
| animation: captain-america 5s ease-in infinite alternate; | ||
| } | ||
|
|
||
| @keyframes captain-america { | ||
| 0% { | ||
| stroke-dasharray: 150 30; | ||
| stroke-dashoffset: 300; | ||
| fill-opacity: 0; | ||
| } | ||
| 80% { | ||
| stroke-dasharray: 800 0; | ||
| stroke-dashoffset: 0; | ||
| fill-opacity: 0; | ||
| } | ||
| 90% { | ||
| fill-opacity: 1; | ||
| } | ||
| 100% { | ||
| fill-opacity: 1; | ||
| } | ||
| } |
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,20 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="styles.css"> | ||
|
|
||
| <title>Loading Tiles</title> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <div class="box box1"></div> | ||
| <div class="box box2"></div> | ||
| <div class="box box3"></div> | ||
| <div class="box box4"></div> | ||
| </div> | ||
|
|
||
| <h2>CSS LOADER TILES</h2> | ||
| </body> |
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,31 @@ | ||
| body{ | ||
| background-color: #000000; | ||
| } | ||
|
|
||
| .container{ | ||
| width: 120px; | ||
| margin: 200px auto; | ||
| margin-bottom: 100px; | ||
| } | ||
|
|
||
| .box{ | ||
| width: 50px; | ||
| height: 50px; | ||
| background-color: #14d6b6; | ||
| display: inline-block; | ||
| animation: pulse 0.6s ease-in infinite alternate; | ||
| } | ||
| .box2, .box3{ | ||
| animation-delay: 0.6s; | ||
| } | ||
|
|
||
| @Keyframes pulse{ | ||
| 100%{ | ||
| opacity: 0; | ||
| } | ||
| } | ||
| h2{ | ||
| color: #14d6b6; | ||
| font-style: italic; | ||
| text-align: center; | ||
| } |
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