Harlequin ball

Developer
Bailh
Size
5,002 Kb
Views
46,552
  1. Harlequin ball Previews
  2. Harlequin ball HTML Codes
  3. Harlequin ball CSS Codes

How do I make an harlequin ball?

Forked from Gregor Adams's Pen pastelDotsPlanet | pastelDotsWeekend.. What is a harlequin ball? How do you make a harlequin ball? This script and codes were developed by Bailh on 12 July 2022, Tuesday.

Harlequin ball Previews
IQ Test

Harlequin ball - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Harlequin ball</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="pane"> <div class="ball"> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="stripe"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </div>
</div>
<div class="bg"></div>
</body>
</html>

Harlequin ball - Script Codes CSS Codes

body { margin: 0; overflow: hidden; height: 100vh; background: ivory; background-image: url("http://themes-pixeden.com/playground/text/tenue/assets/img/texture.jpg");
}
.pane { position: absolute; top: 50%; left: 50%; box-shadow: 0 0 0 1px; height: 57.29578vh; width: 57.29578vh; margin: -28.64789vh; -webkit-perspective: 900px; perspective: 900px; visibility: hidden;
}
.pane div { -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.ball { position: absolute; top: 50%; left: 50%; height: 57.29578vh; width: 57.29578vh; margin: -28.64789vh; -webkit-transform: rotate3d(1, 1, 1, 90deg); transform: rotate3d(1, 1, 1, 90deg); -webkit-animation: rot 11s cubic-bezier(0.06, -7.67, 1, 0.97) infinite alternate; animation: rot 11s cubic-bezier(0.06, -7.67, 1, 0.97) infinite alternate;
}
@-webkit-keyframes rot { 0% { -webkit-transform: rotate3d(0, 0, 0, 90deg); transform: rotate3d(0, 0, 0, 90deg); } 25% { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); } 50% { -webkit-transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); } 75% { -webkit-transform: rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); } 100% { -webkit-transform: rotate3d(0, -1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, -1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); }
}
@keyframes rot { 0% { -webkit-transform: rotate3d(0, 0, 0, 90deg); transform: rotate3d(0, 0, 0, 90deg); } 25% { -webkit-transform: rotate3d(1, 0, 0, 90deg); transform: rotate3d(1, 0, 0, 90deg); } 50% { -webkit-transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); } 75% { -webkit-transform: rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); } 100% { -webkit-transform: rotate3d(0, -1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); transform: rotate3d(0, -1, 0, 90deg) rotate3d(0, 0, 1, 90deg) rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 90deg); }
}
.ball .stripe { position: absolute; top: 50%; left: 50%; height: 28.64789vh; width: 6vh; margin: -28.64789vh -3vh;
}
.ball .stripe:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
.ball .stripe:nth-child(2) { -webkit-transform: rotate(12deg); transform: rotate(12deg);
}
.ball .stripe:nth-child(3) { -webkit-transform: rotate(24deg); transform: rotate(24deg);
}
.ball .stripe:nth-child(4) { -webkit-transform: rotate(36deg); transform: rotate(36deg);
}
.ball .stripe:nth-child(5) { -webkit-transform: rotate(48deg); transform: rotate(48deg);
}
.ball .stripe:nth-child(6) { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
.ball .stripe:nth-child(7) { -webkit-transform: rotate(72deg); transform: rotate(72deg);
}
.ball .stripe:nth-child(8) { -webkit-transform: rotate(84deg); transform: rotate(84deg);
}
.ball .stripe:nth-child(9) { -webkit-transform: rotate(96deg); transform: rotate(96deg);
}
.ball .stripe:nth-child(10) { -webkit-transform: rotate(108deg); transform: rotate(108deg);
}
.ball .stripe:nth-child(11) { -webkit-transform: rotate(120deg); transform: rotate(120deg);
}
.ball .stripe:nth-child(12) { -webkit-transform: rotate(132deg); transform: rotate(132deg);
}
.ball .stripe:nth-child(13) { -webkit-transform: rotate(144deg); transform: rotate(144deg);
}
.ball .stripe:nth-child(14) { -webkit-transform: rotate(156deg); transform: rotate(156deg);
}
.ball .stripe:nth-child(15) { -webkit-transform: rotate(168deg); transform: rotate(168deg);
}
.ball .stripe:nth-child(16) { -webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.ball .stripe:nth-child(17) { -webkit-transform: rotate(192deg); transform: rotate(192deg);
}
.ball .stripe:nth-child(18) { -webkit-transform: rotate(204deg); transform: rotate(204deg);
}
.ball .stripe:nth-child(19) { -webkit-transform: rotate(216deg); transform: rotate(216deg);
}
.ball .stripe:nth-child(20) { -webkit-transform: rotate(228deg); transform: rotate(228deg);
}
.ball .item { position: absolute; top: 50%; left: 50%; height: 6vh; width: 30vh; margin: -3vh; border-radius: 100%; visibility: visible; box-shadow: 0 0 0 0.2vh rgba(124, 255, 0, 0.95963) inset;
}
.ball .item:nth-child(1) { width: 6vh; margin-left: -3vh; background: rgba(242, 142, 0, 0.46636); -webkit-transform: rotateX(0deg) translateZ(28.64789vh); transform: rotateX(0deg) translateZ(28.64789vh);
}
.ball .item:nth-child(2) { width: 5.48127vh; margin-left: -2.74064vh; background: rgba(133, 165, 108, 0.42967); -webkit-transform: rotateX(12deg) translateZ(28.64789vh); transform: rotateX(12deg) translateZ(28.64789vh);
}
.ball .item:nth-child(3) { width: 4.01478vh; margin-left: -2.00739vh; background: rgba(248, 33, 161, 0.68859); -webkit-transform: rotateX(24deg) translateZ(28.64789vh); transform: rotateX(24deg) translateZ(28.64789vh);
}
.ball .item:nth-child(4) { width: 1.8541vh; margin-left: -0.92705vh; background: rgba(239, 110, 0, 0.36325); -webkit-transform: rotateX(36deg) translateZ(28.64789vh); transform: rotateX(36deg) translateZ(28.64789vh);
}
.ball .item:nth-child(5) { width: 0.62717vh; margin-left: -0.31359vh; background: rgba(240, 136, 0, 0.40657); -webkit-transform: rotateX(48deg) translateZ(28.64789vh); transform: rotateX(48deg) translateZ(28.64789vh);
}
.ball .item:nth-child(6) { width: 3vh; margin-left: -1.5vh; background: rgba(247, 35, 24, 0.66954); -webkit-transform: rotateX(60deg) translateZ(28.64789vh); transform: rotateX(60deg) translateZ(28.64789vh);
}
.ball .item:nth-child(7) { width: 4.8541vh; margin-left: -2.42705vh; background: rgba(166, 76, 90, 0.36376); -webkit-transform: rotateX(72deg) translateZ(28.64789vh); transform: rotateX(72deg) translateZ(28.64789vh);
}
.ball .item:nth-child(8) { width: 5.86889vh; margin-left: -2.93444vh; background: rgba(77, 219, 0, 0.69949); -webkit-transform: rotateX(84deg) translateZ(28.64789vh); transform: rotateX(84deg) translateZ(28.64789vh);
}
.ball .item:nth-child(9) { width: 5.86889vh; margin-left: -2.93444vh; background: rgba(161, 164, 0, 0.34446); -webkit-transform: rotateX(96deg) translateZ(28.64789vh); transform: rotateX(96deg) translateZ(28.64789vh);
}
.ball .item:nth-child(10) { width: 4.8541vh; margin-left: -2.42705vh; background: rgba(114, 42, 163, 0.62023); -webkit-transform: rotateX(108deg) translateZ(28.64789vh); transform: rotateX(108deg) translateZ(28.64789vh);
}
.ball .item:nth-child(11) { width: 3vh; margin-left: -1.5vh; background: rgba(243, 57, 18, 0.51244); -webkit-transform: rotateX(120deg) translateZ(28.64789vh); transform: rotateX(120deg) translateZ(28.64789vh);
}
.ball .item:nth-child(12) { width: 0.62717vh; margin-left: -0.31359vh; background: rgba(246, 145, 0, 0.60615); -webkit-transform: rotateX(132deg) translateZ(28.64789vh); transform: rotateX(132deg) translateZ(28.64789vh);
}
.ball .item:nth-child(13) { width: 1.8541vh; margin-left: -0.92705vh; background: rgba(241, 107, 0, 0.46023); -webkit-transform: rotateX(144deg) translateZ(28.64789vh); transform: rotateX(144deg) translateZ(28.64789vh);
}
.ball .item:nth-child(14) { width: 4.01478vh; margin-left: -2.00739vh; background: rgba(248, 31, 164, 0.69949); -webkit-transform: rotateX(156deg) translateZ(28.64789vh); transform: rotateX(156deg) translateZ(28.64789vh);
}
.ball .item:nth-child(15) { width: 5.48127vh; margin-left: -2.74064vh; background: rgba(66, 197, 182, 0.68231); -webkit-transform: rotateX(168deg) translateZ(28.64789vh); transform: rotateX(168deg) translateZ(28.64789vh);
}
.ball .item:nth-child(16) { width: 6vh; margin-left: -3vh; background: rgba(248, 156, 0, 0.69949); -webkit-transform: rotateX(180deg) translateZ(28.64789vh); transform: rotateX(180deg) translateZ(28.64789vh);
}
.ball .item:nth-child(17) { width: 5.48127vh; margin-left: -2.74064vh; background: rgba(153, 155, 85, 0.34609); -webkit-transform: rotateX(192deg) translateZ(28.64789vh); transform: rotateX(192deg) translateZ(28.64789vh);
}
.ball .item:nth-child(18) { width: 4.01478vh; margin-left: -2.00739vh; background: rgba(237, 83, 66, 0.30806); -webkit-transform: rotateX(204deg) translateZ(28.64789vh); transform: rotateX(204deg) translateZ(28.64789vh);
}
.ball .item:nth-child(19) { width: 1.8541vh; margin-left: -0.92705vh; background: rgba(248, 101, 0, 0.69949); -webkit-transform: rotateX(216deg) translateZ(28.64789vh); transform: rotateX(216deg) translateZ(28.64789vh);
}
.ball .item:nth-child(20) { width: 0.62717vh; margin-left: -0.31359vh; background: rgba(244, 143, 0, 0.55327); -webkit-transform: rotateX(228deg) translateZ(28.64789vh); transform: rotateX(228deg) translateZ(28.64789vh);
}
.ball .item:nth-child(21) { width: 3vh; margin-left: -1.5vh; background: rgba(247, 38, 24, 0.64832); -webkit-transform: rotateX(240deg) translateZ(28.64789vh); transform: rotateX(240deg) translateZ(28.64789vh);
}
.ball .item:nth-child(22) { width: 4.8541vh; margin-left: -2.42705vh; background: rgba(97, 31, 188, 0.69932); -webkit-transform: rotateX(252deg) translateZ(28.64789vh); transform: rotateX(252deg) translateZ(28.64789vh);
}
.ball .item:nth-child(23) { width: 5.86889vh; margin-left: -2.93444vh; background: rgba(105, 200, 0, 0.58491); -webkit-transform: rotateX(264deg) translateZ(28.64789vh); transform: rotateX(264deg) translateZ(28.64789vh);
}
.ball .item:nth-child(24) { width: 5.86889vh; margin-left: -2.93444vh; background: rgba(115, 193, 0, 0.54366); -webkit-transform: rotateX(276deg) translateZ(28.64789vh); transform: rotateX(276deg) translateZ(28.64789vh);
}
.ball .item:nth-child(25) { width: 4.8541vh; margin-left: -2.42705vh; background: rgba(149, 65, 114, 0.45179); -webkit-transform: rotateX(288deg) translateZ(28.64789vh); transform: rotateX(288deg) translateZ(28.64789vh);
}
.ball .item:nth-child(26) { width: 3vh; margin-left: -1.5vh; background: rgba(244, 53, 19, 0.53992); -webkit-transform: rotateX(300deg) translateZ(28.64789vh); transform: rotateX(300deg) translateZ(28.64789vh);
}
.ball .item:nth-child(27) { width: 0.62717vh; margin-left: -0.31359vh; background: rgba(246, 146, 0, 0.62433); -webkit-transform: rotateX(312deg) translateZ(28.64789vh); transform: rotateX(312deg) translateZ(28.64789vh);
}
.ball .item:nth-child(28) { width: 1.8541vh; margin-left: -0.92705vh; background: rgba(242, 107, 0, 0.47207); -webkit-transform: rotateX(324deg) translateZ(28.64789vh); transform: rotateX(324deg) translateZ(28.64789vh);
}
.ball .item:nth-child(29) { width: 4.01478vh; margin-left: -2.00739vh; background: rgba(245, 49, 131, 0.57573); -webkit-transform: rotateX(336deg) translateZ(28.64789vh); transform: rotateX(336deg) translateZ(28.64789vh);
}
.ball .item:nth-child(30) { width: 5.48127vh; margin-left: -2.74064vh; background: rgba(152, 155, 86, 0.34874); -webkit-transform: rotateX(348deg) translateZ(28.64789vh); transform: rotateX(348deg) translateZ(28.64789vh);
}
.bg { background-blend-mode: difference, color; mix-blend-mode: difference; opacity: .2; background-image: -webkit-linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, #ff2424 13%, rgba(255, 36, 255, 0.84) 15%, #c87f5b 25%, rgba(211, 101, 80, 0.73) 33%, #5bc8c8 48%, rgba(91, 200, 200, 0.9) 49%, #c87f5b 57%, #c8c85b 63%, #b6c85b 67%, #d26251 74%, rgba(37, 254, 59, 0.8) 84%, #c7c55c 86%, rgba(37, 254, 59, 0.7) 100%); background-image: linear-gradient(45deg, rgba(255, 0, 0, 0) 0%, #ff2424 13%, rgba(255, 36, 255, 0.84) 15%, #c87f5b 25%, rgba(211, 101, 80, 0.73) 33%, #5bc8c8 48%, rgba(91, 200, 200, 0.9) 49%, #c87f5b 57%, #c8c85b 63%, #b6c85b 67%, #d26251 74%, rgba(37, 254, 59, 0.8) 84%, #c7c55c 86%, rgba(37, 254, 59, 0.7) 100%); background-repeat: no-repeat; background-size: cover; height: 400%; left: 0; position: absolute; top: 0; width: 200%; -webkit-animation: ring 5s cubic-bezier(0.74, 0.31, 0.37, 0.8) infinite alternate; animation: ring 5s cubic-bezier(0.74, 0.31, 0.37, 0.8) infinite alternate;
}
@-webkit-keyframes ring { 50% { -webkit-transform: scale(3); transform: scale(3); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); }
}
@keyframes ring { 50% { -webkit-transform: scale(3); transform: scale(3); } 100% { -webkit-transform: translate(-50%, -50%) rotateZ(360deg); transform: translate(-50%, -50%) rotateZ(360deg); }
}
Harlequin ball - Script Codes
Harlequin ball - Script Codes
Home Page Home
Developer Bailh
Username cathbailh
Uploaded July 12, 2022
Rating 4
Size 5,002 Kb
Views 46,552
Do you need developer help for Harlequin ball?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bailh (cathbailh) Script Codes
Name
Vaporous Mood
Circular noise
Living flower
Rainbow Harmony
Sweet chaos in the space of tulle
Hue Window
Lunares
Magma
Sintineddi
Fanzine Radioactive Skull
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!