diff --git a/Art/Animation_makrenko-dev/index.html b/Art/Animation_makrenko-dev/index.html new file mode 100644 index 000000000..da53bffa6 --- /dev/null +++ b/Art/Animation_makrenko-dev/index.html @@ -0,0 +1,20 @@ + + + + + + Animation for AN + + + +
+
+
+
+
+
+
+
+
+ + diff --git a/Art/Animation_makrenko-dev/logo.png b/Art/Animation_makrenko-dev/logo.png new file mode 100644 index 000000000..fb0369f13 Binary files /dev/null and b/Art/Animation_makrenko-dev/logo.png differ diff --git a/Art/Animation_makrenko-dev/logog.gif b/Art/Animation_makrenko-dev/logog.gif new file mode 100644 index 000000000..6c6422cc4 Binary files /dev/null and b/Art/Animation_makrenko-dev/logog.gif differ diff --git a/Art/Animation_makrenko-dev/style.css b/Art/Animation_makrenko-dev/style.css new file mode 100644 index 000000000..9dcc22771 --- /dev/null +++ b/Art/Animation_makrenko-dev/style.css @@ -0,0 +1,65 @@ +body { + background-color: #94e5ff; + margin: 20px; +} +.loader-container { + position: relative; + width: 400px; + height: 400px; + display: inline-block; + text-align: center; + border: 1px solid #000000; + vertical-align: middle; +} +.loader-3 { + width: 300px; + height: 300px; + position: absolute; + top: 50px; + left: 0; + right: 0; + margin: 0 auto 0; + text-align: center; +} +.loader-3 div { + background-color: #ffffff; + height: 100%; + width: 30px; + border: 1px solid #000000; + display: inline-block; + -webkit-animation: loader-3 1.2s infinite ease-in-out; + animation: loader-3 1.2s infinite ease-in-out; +} + +@keyframes loader-3 { + 0%, + 40%, + 100% { + transform: scaleY(0.5); + -webkit-transform: scaleY(0.5); + } + 20% { + transform: scaleY(1); + -webkit-transform: scaleY(1); + } +} + +.loader-3 .item-2 { + -webkit-animation-delay: 0.1s; + animation-delay: 0.1s; +} + +.loader-3 .item-3 { + -webkit-animation-delay: 0.2s; + animation-delay: 0.2s; +} + +.loader-3 .item-4 { + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +.loader-3 .item-5 { + -webkit-animation-delay: 0.4s; + animation-delay: 0.4s; +} diff --git a/include.js b/include.js index e1aa405a7..960147a8e 100644 --- a/include.js +++ b/include.js @@ -47,6 +47,13 @@ let cards = [ imageLink: './Art/CDay87/Bounce_Animation.gif', author: 'CDay-87', githubLink: 'https://github.com/CDay-87' + }, + { + artName: 'Loader', + pageLink: './Art/Animation_makrenko-dev/index.html', + imageLink: './Art/Animation_makrenko-dev/logog.gif', + author: 'makrenko-dev', + githubLink: 'https://github.com/makrenko-dev' } ];