diff --git a/Art/runningBars/index.html b/Art/runningBars/index.html new file mode 100644 index 000000000..66c1eff40 --- /dev/null +++ b/Art/runningBars/index.html @@ -0,0 +1,11 @@ + + + + Running Bars + + + +
+
+ + diff --git a/Art/runningBars/running.gif b/Art/runningBars/running.gif new file mode 100644 index 000000000..a1f42cd76 Binary files /dev/null and b/Art/runningBars/running.gif differ diff --git a/Art/runningBars/style.css b/Art/runningBars/style.css new file mode 100644 index 000000000..632753400 --- /dev/null +++ b/Art/runningBars/style.css @@ -0,0 +1,28 @@ +div#one { + height: 400px; + width: 400px; + background: #0d00ff; + animation: slidein 4s linear 4s infinite alternate; +} + +div#two { + height: 50%; + width: 50%; + background: #ff06b8; + transition: slidein; + animation: slidein 0.3s linear 1s infinite alternate; +} + +div#one:active div#two { + background: green; + transform: translateX(100%); +} + +@keyframes slidein { + from { + transform: scaleX(3); + } + to { + transform: scaleX(6); + } +} diff --git a/include.js b/include.js index 960147a8e..caabacea2 100644 --- a/include.js +++ b/include.js @@ -54,6 +54,13 @@ let cards = [ imageLink: './Art/Animation_makrenko-dev/logog.gif', author: 'makrenko-dev', githubLink: 'https://github.com/makrenko-dev' + }, + { + artName: 'Running Laps', + pageLink: './Art/runningBars/index.html', + imageLink: './Art/runningBars/running.gif', + author: 'Daniel', + githubLink: 'https://github.com/dsauce817' } ];