Pure CSS Bouncing Basketball Loader Create With Html And Css @Dr Tech |...
HTML And CSS Cooding
August 27, 2022
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;}
