diff --git a/Art/Venkateeshh/BouncingBall.html b/Art/Venkateeshh/BouncingBall.html index 49c978044..0eb6a828e 100644 --- a/Art/Venkateeshh/BouncingBall.html +++ b/Art/Venkateeshh/BouncingBall.html @@ -1,12 +1,12 @@ - - - + + + BouncingBall - - + +
- - \ No newline at end of file + + diff --git a/Art/Venkateeshh/style.css b/Art/Venkateeshh/style.css index e8ffc0899..0ec56899e 100644 --- a/Art/Venkateeshh/style.css +++ b/Art/Venkateeshh/style.css @@ -1,68 +1,64 @@ -body{ - background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%); +body { + background: linear-gradient(90deg, #efd5ff 0%, #515ada 100%); } .loader { - position: relative; - width: 120px; - height: 90px; - margin: 30% auto; + position: relative; + width: 120px; + height: 90px; + margin: 30% auto; +} + +.loader:before { + content: ''; + position: absolute; + bottom: 30px; + left: 50px; + height: 30px; + width: 30px; + border-radius: 50%; + background: #e3ca8a; + animation: loading-bounce 0.5s ease-in-out infinite alternate; +} + +.loader:after { + content: ''; + position: absolute; + right: 0; + top: 0; + height: 7px; + width: 45px; + border-radius: 4px; + box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; + animation: loading-step 1s ease-in-out infinite; +} + +@keyframes loading-bounce { + 0% { + transform: scale(1, 0.7); } - - .loader:before { - content: ""; - position: absolute; - bottom: 30px; - left: 50px; - height: 30px; - width: 30px; - border-radius: 50%; - background: #e3ca8a; - animation: loading-bounce 0.5s ease-in-out infinite alternate; + + 40% { + transform: scale(0.8, 1.2); } - - .loader:after { - content: ""; - position: absolute; - right: 0; - top: 0; - height: 7px; - width: 45px; - border-radius: 4px; - box-shadow: 0 5px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 95px 0 #f2f2f2; - animation: loading-step 1s ease-in-out infinite; + + 60% { + transform: scale(1, 1); } - - @keyframes loading-bounce { - 0% { - transform: scale(1, 0.7); - } - - 40% { - transform: scale(0.8, 1.2); - } - - 60% { - transform: scale(1, 1); - } - - 100% { - bottom: 140px; - } + + 100% { + bottom: 140px; + } +} + +@keyframes loading-step { + 0% { + box-shadow: 0 10px 0 rgba(0, 0, 0, 0), 0 10px 0 #f2f2f2, + -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2; } - - @keyframes loading-step { - 0% { - box-shadow: 0 10px 0 rgba(0, 0, 0, 0), - 0 10px 0 #f2f2f2, - -35px 50px 0 #f2f2f2, - -70px 90px 0 #f2f2f2; - } - - 100% { - box-shadow: 0 10px 0 #f2f2f2, - -35px 50px 0 #f2f2f2, - -70px 90px 0 #f2f2f2, - -70px 90px 0 rgba(0, 0, 0, 0); - } - } \ No newline at end of file + + 100% { + box-shadow: 0 10px 0 #f2f2f2, -35px 50px 0 #f2f2f2, -70px 90px 0 #f2f2f2, + -70px 90px 0 rgba(0, 0, 0, 0); + } +}