Pure CSS Bouncing Basketball Loader Create With Html And Css @Dr Tech |...

HTML COURCE CODE

<!DOCTYPE html>

<html>

<head>

<title>Pure CSS Bouncing Basketball Loader</title>

<link rel="stylesheet" type="text/css" href="b.css">

</head>

<body>

<div class="ball">

<div class="inner">

<div class="line"></div>

<div class="line line--two"></div>

<div class="oval"></div>

<div class="oval oval--two"></div>

</div>

</div>

<div class="shadow"></div>


</body>

</html>

CSS SOURCE CODE

html,

body {height: 100%;}

body {

align-items: center;

background: radial-gradient(circle at 36px 20px, green, red);

display: flex;

flex-direction: column;

justify-content: center;}

.wrapper {

transform-origin: bottom;

transform: scaleY(0.85);}

@-webkit-keyframes rotateBall {

0% {transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}

50% {transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);}

100% {transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);}}

@keyframes rotateBall {

0% {transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);}

50% {transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);}

100% {transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg);}}

@-webkit-keyframes bounceBall {

0% {transform: translateY(-70px) scale(1, 1);}

15% {transform: translateY(-56px) scale(0.9, 1.1);}

45% {transform: translateY(70px) scale(1, 1);}

50% {transform: translateY(73.5px) scale(1, 0.85);}

55% {transform: translateY(70px) scale(1, 0.95);}

85% {transform: translateY(-56px) scale(0.9, 1.1);}

100% {transform: translateY(-70px) scale(1, 1);}}

@keyframes bounceBall {

0% {transform: translateY(-70px) scale(1, 1);}

15% {transform: translateY(-56px) scale(0.9, 1.1);}

45% {transform: translateY(70px) scale(1, 1);}

50% {transform: translateY(73.5px) scale(1, 0.85);}

55% {transform: translateY(70px) scale(1, 0.95);}

85% {transform: translateY(-56px) scale(0.9, 1.1);}

100% {transform: translateY(-70px) scale(1, 1);}}

.ball {

-webkit-animation-name: bounceBall;

        animation-name: bounceBall;

    -webkit-animation-duration: 1.2s;

            animation-duration: 1.2s;

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);   

    border-radius: 50%;

    height: 60px;

    position: relative;

    transform: translateY(-70px);

    transform-style: preserve-3d;

    width: 60px;

    z-index: 1;}

.ball::before {

background: radial-gradient(circle at 36px 20px, brown, yellow);

border: 2px solid red;

border-radius: 50%;

content: "";

height: calc(100% + 6px);

left: -3px;

position: absolute;

top: -3px;

transform: translateZ(1vmin);

width: calc(100% + 6px);}

.ball .inner {

-webkit-animation-name: rotateBall;

        animation-name: rotateBall;

-webkit-animation-duration: 25s;

        animation-duration: 25s;

-webkit-animation-iteration-count: infinite;

        animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

        animation-timing-function: linear;

border-radius: 50%;

height: 100%;

position: absolute;                                

transform-style: preserve-3d;

width: 100%;}

.ball .line::before, .ball .line::after {

border: 2px solid darkblue;

border-radius: 50%;

content: "";

height: 99%;

position: absolute;

width: 99%;}

.ball .line:before {

transform: rotate3d(0, 0, 0, 0);}

.ball .line:after {

transform: rotate3d(1, 0, 0, 90deg);}

.ball .line--two:before {

transform: rotate3d(0, 0, 0, 2deg);}

.ball .line--two:after {

transform: rotate3d(1, 0, 0, 88eg);}

.ball .oval::before, .ball .oval::after {

border-top: 4px solid #333333;

border-radius: 50%;

content: "";

height: 99%;

position: absolute;

width: 99%;}

.ball .oval:before {

transform: rotate3d(1, 0, 0, 45deg) translate3d(0, 0, 6px);}

.ball .oval:after {

transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 0, -6px);}

.ball .oval--two:before {

transform: rotate3d(1, 0, 0, 135deg) translate3d(0, 0, -6px);}

.ball .oval--two:after {

transform: rotate3d(1, 0, 0, -135deg) translate3d(0, 0, 6px);}

@-webkit-keyframes bounceShadow {

0% {filter: blur(3px);

opacity: 0.6;

transform: translateY(73px) scale(0.5, 0.5);}

45% {filter: blur(1px);

opacity: 0.9;

transform: translateY(73px) scale(1, 1);}

55% {filter: blur(1px);

opacity: 0.9;

transform: translateY(73px) scale(1, 1);}

100% {filter: blur(3px);

opacity: 0.6;

transform: translateY(73px) scale(0.5, 0.5);}}

@keyframes bounceShadow {

0% {filter: blur(3px);

opacity: 0.6;

transform: translateY(73px) scale(0.5, 0.5);}

45% {filter: blur(1px);

opacity: 0.9;

transform: translateY(73px) scale(1, 1);}

55% {filter: blur(1px);

opacity: 0.9;

transform: translateY(73px) scale(1, 1);}

100% {filter: blur(3px);

opacity: 0.6;

transform: translateY(73px) scale(0.5, 0.5);}}

.shadow {

-webkit-animation-name: bounceShadow;

        animation-name: bounceShadow;

    -webkit-animation-duration: 1.2s;

            animation-duration: 1.2s;

    -webkit-animation-iteration-count: infinite;

            animation-iteration-count: infinite;

    -webkit-animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

            animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

    background: black;

    filter: blur(2px);

    border-radius: 50%;

    height: 6px;

    transform: translateY(73px);

    width: 54px;}

Tags

You May Like

Show more
Error 404: Results Not Found Use Correct /Label or /recent or /random code to Show Posts

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.