Smash Ball

Developer
Jon Kantner
Size
4,246 Kb
Views
30,360
  1. Smash Ball Previews
  2. Smash Ball HTML Codes
  3. Smash Ball CSS Codes

How do I make an smash ball?

The Smash Ball from Super Smash Bros. recreated in CSS. The movement is done by putting the ball and orbits inside div moving up and down inside a parent div moving left and right. Then the random curved paths are a result of how the timing functions work and using slightly different durations for the top-level div and its child (moveX and moveY).. What is a smash ball? How do you make a smash ball? This script and codes were developed by Jon Kantner on 20 August 2022, Saturday.

Smash Ball Previews
IQ Test

Smash Ball - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smash Ball</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="moveX"> <div class="moveY"> <div class="smash-ball"> <div class="orbit"></div> <div class="orbit"></div> <div class="orbit"></div> <div class="ball"></div> </div> </div>
</div>
</body>
</html>

Smash Ball - Script Codes CSS Codes

/*
Reference
http://vignette1.wikia.nocookie.net/ssb/images/f/f3/SmashBall.png
*/
body { background: black; display: flex; height: 100vh; margin: 0;
}
.moveX { animation: moveX 3.5s ease-in-out infinite alternate; margin: auto;
}
.moveY { animation: moveY 4.7s ease-in-out infinite alternate;
}
.smash-ball, .smash-ball div { width: 100px; height: 100px;
}
.smash-ball { transform-style: preserve-3d;
}
.orbit { border-width: 3px 3px 3px 0; border-style: solid; border-color: #ffff80 #ffff80 transparent transparent; border-radius: 50%; filter: blur(1px); -webkit-filter: blur(1px); position: absolute; top: -3px; left: -3px; z-index: 1;
}
.orbit:nth-of-type(1) { transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(0deg); animation: orbit-1 1.5s linear infinite;
}
.orbit:nth-of-type(2) { transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(0deg); animation: orbit-2 1.5s linear infinite;
}
.orbit:nth-of-type(3) { transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(0deg); animation: orbit-3 1.5s linear infinite;
}
.ball { filter: saturate(150%); -webkit-filter: saturate(150%); background-color: black; background-image: radial-gradient(50px 50px at 20px 180px, #4bf4a3, rgba(75, 244, 163, 0)), radial-gradient(50px 50px at 90px 120px, #e83a5e, rgba(232, 58, 94, 0)), radial-gradient(50px 60px at 40px 115px, #8240bf 5%, rgba(130, 64, 191, 0)), radial-gradient(50px 50px at 75px 85px, #58af58, #affa5a, #e6f064, rgba(230, 240, 100, 0)), radial-gradient(50px 50px at 90px 20px, #e83a5e, rgba(232, 58, 94, 0)), radial-gradient(50px 50px at -10px 25px, #0a49ca 30%, rgba(10, 73, 202, 0)), radial-gradient(50px 50px at -10px 125px, #0a49ca 30%, rgba(10, 73, 202, 0)), radial-gradient(50px 50px at 20px 80px, #4bf4a3, rgba(75, 244, 163, 0)), radial-gradient(50px 60px at 40px 15px, #8240bf 5%, rgba(130, 64, 191, 0)), radial-gradient(50px 50px at 75px -15px, #58af58, #affa5a, #e6f064, rgba(230, 240, 100, 0)), linear-gradient(90deg, #4bf4a3, #4bf4a3, rgba(75, 244, 163, 0)); background-size: 100px 100px; border-radius: 50%; box-shadow: 0 0 5px 1.5px white, 0 0 15px 10px #8cccff; overflow: hidden; position: relative; animation: smashBall 1s linear infinite;
}
.ball::before, .ball::after { content: ""; display: block; position: absolute; width: 100%; height: 100%;
}
.ball::before { background-image: linear-gradient(90deg, transparent, transparent 16.6px, black 16.6px, black 38.9px, transparent 38.9px, transparent), linear-gradient(transparent, transparent 57.1px, black 57.1px, black 66.1px, transparent 66.1px, transparent), radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 62%, #000000 62%, #000000); opacity: 0.45;
}
.ball::after { background-image: radial-gradient(#ffffff, rgba(255, 255, 255, 0) 40%);
}
@keyframes orbit-1 { from { transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(0deg); } to { transform: scale(1.3) rotateX(70deg) rotateY(60deg) rotateZ(360deg); }
}
@keyframes orbit-2 { from { transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(60deg); } to { transform: scale(1.3) rotateX(70deg) rotateY(120deg) rotateZ(420deg); }
}
@keyframes orbit-3 { from { transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(120deg); } to { transform: scale(1.3) rotateX(70deg) rotateY(180deg) rotateZ(480deg); }
}
@keyframes smashBall { from { background-position: 0 200px; box-shadow: 0 0 5px 2.5px white, 0 0 15px 11px #8cccff; } 50% { box-shadow: 0 0 5px 2px white, 0 0 15px 9px #8cccff; } to { background-position: 0 100px; box-shadow: 0 0 5px 2.5px white, 0 0 15px 10px #8cccff; }
}
@keyframes moveX { from { transform: translateX(-25vw); } to { transform: translateX(25vw); }
}
@keyframes moveY { from { transform: translateY(-25vh); } to { transform: translateY(25vh); }
}
Smash Ball - Script Codes
Smash Ball - Script Codes
Home Page Home
Developer Jon Kantner
Username jkantner
Uploaded August 20, 2022
Rating 4
Size 4,246 Kb
Views 30,360
Do you need developer help for Smash 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!

Jon Kantner (jkantner) Script Codes
Name
Native App-Like Mobile Site Concept
PPAP
Impossible Staircase
Fox News TV Display
Interactive Sublime Text Logo
3D Half Word and Shadow
Combination Lock
Payment UX
Flying Windows Logo
Big Ben and Parliament
Create amazing art & images 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!