diff --git a/Art/tmsagarofficial/anim2.css b/Art/tmsagarofficial/anim2.css new file mode 100644 index 000000000..314f096e2 --- /dev/null +++ b/Art/tmsagarofficial/anim2.css @@ -0,0 +1,179 @@ +.cssload-thecube { + width: 73px; + height: 73px; + margin: 0 auto; + margin-top: 49px; + position: relative; + transform: rotateZ(45deg); + -o-transform: rotateZ(45deg); + -ms-transform: rotateZ(45deg); + -webkit-transform: rotateZ(45deg); + -moz-transform: rotateZ(45deg); +} +.cssload-thecube .cssload-cube { + position: relative; + transform: rotateZ(45deg); + -o-transform: rotateZ(45deg); + -ms-transform: rotateZ(45deg); + -webkit-transform: rotateZ(45deg); + -moz-transform: rotateZ(45deg); +} +.cssload-thecube .cssload-cube { + float: left; + width: 50%; + height: 50%; + position: relative; + transform: scale(1.1); + -o-transform: scale(1.1); + -ms-transform: scale(1.1); + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); +} +.cssload-thecube .cssload-cube:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgb(0,0,0); + animation: cssload-fold-thecube 6.72s infinite linear both; + -o-animation: cssload-fold-thecube 6.72s infinite linear both; + -ms-animation: cssload-fold-thecube 6.72s infinite linear both; + -webkit-animation: cssload-fold-thecube 6.72s infinite linear both; + -moz-animation: cssload-fold-thecube 6.72s infinite linear both; + transform-origin: 100% 100%; + -o-transform-origin: 100% 100%; + -ms-transform-origin: 100% 100%; + -webkit-transform-origin: 100% 100%; + -moz-transform-origin: 100% 100%; +} +.cssload-thecube .cssload-c2 { + transform: scale(1.1) rotateZ(90deg); + -o-transform: scale(1.1) rotateZ(90deg); + -ms-transform: scale(1.1) rotateZ(90deg); + -webkit-transform: scale(1.1) rotateZ(90deg); + -moz-transform: scale(1.1) rotateZ(90deg); +} +.cssload-thecube .cssload-c3 { + transform: scale(1.1) rotateZ(180deg); + -o-transform: scale(1.1) rotateZ(180deg); + -ms-transform: scale(1.1) rotateZ(180deg); + -webkit-transform: scale(1.1) rotateZ(180deg); + -moz-transform: scale(1.1) rotateZ(180deg); +} +.cssload-thecube .cssload-c4 { + transform: scale(1.1) rotateZ(270deg); + -o-transform: scale(1.1) rotateZ(270deg); + -ms-transform: scale(1.1) rotateZ(270deg); + -webkit-transform: scale(1.1) rotateZ(270deg); + -moz-transform: scale(1.1) rotateZ(270deg); +} +.cssload-thecube .cssload-c2:before { + animation-delay: 0.84s; + -o-animation-delay: 0.84s; + -ms-animation-delay: 0.84s; + -webkit-animation-delay: 0.84s; + -moz-animation-delay: 0.84s; +} +.cssload-thecube .cssload-c3:before { + animation-delay: 1.68s; + -o-animation-delay: 1.68s; + -ms-animation-delay: 1.68s; + -webkit-animation-delay: 1.68s; + -moz-animation-delay: 1.68s; +} +.cssload-thecube .cssload-c4:before { + animation-delay: 2.52s; + -o-animation-delay: 2.52s; + -ms-animation-delay: 2.52s; + -webkit-animation-delay: 2.52s; + -moz-animation-delay: 2.52s; +} + + + +@keyframes cssload-fold-thecube { + 0%, 10% { + transform: perspective(136px) rotateX(-180deg); + opacity: 0; + } + 25%, + 75% { + transform: perspective(136px) rotateX(0deg); + opacity: 1; + } + 90%, + 100% { + transform: perspective(136px) rotateY(180deg); + opacity: 0; + } +} + +@-o-keyframes cssload-fold-thecube { + 0%, 10% { + -o-transform: perspective(136px) rotateX(-180deg); + opacity: 0; + } + 25%, + 75% { + -o-transform: perspective(136px) rotateX(0deg); + opacity: 1; + } + 90%, + 100% { + -o-transform: perspective(136px) rotateY(180deg); + opacity: 0; + } +} + +@-ms-keyframes cssload-fold-thecube { + 0%, 10% { + -ms-transform: perspective(136px) rotateX(-180deg); + opacity: 0; + } + 25%, + 75% { + -ms-transform: perspective(136px) rotateX(0deg); + opacity: 1; + } + 90%, + 100% { + -ms-transform: perspective(136px) rotateY(180deg); + opacity: 0; + } +} + +@-webkit-keyframes cssload-fold-thecube { + 0%, 10% { + -webkit-transform: perspective(136px) rotateX(-180deg); + opacity: 0; + } + 25%, + 75% { + -webkit-transform: perspective(136px) rotateX(0deg); + opacity: 1; + } + 90%, + 100% { + -webkit-transform: perspective(136px) rotateY(180deg); + opacity: 0; + } +} + +@-moz-keyframes cssload-fold-thecube { + 0%, 10% { + -moz-transform: perspective(136px) rotateX(-180deg); + opacity: 0; + } + 25%, + 75% { + -moz-transform: perspective(136px) rotateX(0deg); + opacity: 1; + } + 90%, + 100% { + -moz-transform: perspective(136px) rotateY(180deg); + opacity: 0; + } +} diff --git a/Art/tmsagarofficial/anim2.gif b/Art/tmsagarofficial/anim2.gif new file mode 100644 index 000000000..e58e2802f Binary files /dev/null and b/Art/tmsagarofficial/anim2.gif differ diff --git a/Art/tmsagarofficial/anim2.html b/Art/tmsagarofficial/anim2.html new file mode 100644 index 000000000..4d79ee4f2 --- /dev/null +++ b/Art/tmsagarofficial/anim2.html @@ -0,0 +1,17 @@ + + + + + + + Anim1 + + +
+
+
+
+
+
+ + diff --git a/include.js b/include.js index ac65f496d..2ae741192 100644 --- a/include.js +++ b/include.js @@ -464,6 +464,13 @@ let cards = [ author: 'Joy', githubLink: 'https://github.com/jatanassian' }, + { + artName: 'Tiled Loader', + pageLink: './Art/tmsagarofficial/anim2.html', + imageLink: './Art/tmsagarofficial/anim2.gif', + author: 'tmsagarofficial', + githubLink: 'https://github.com/tmsagarofficial' + }, { artName: 'Orbiting-Ball', pageLink: './Art/Tipchan/OrbitingBall.html',