Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How to make 2 circles disappear on collision?

adibak

New Coder
Hi,
I'm trying to make a html/css program where there are 2 circles, moving in a circular path. My code so far:
[CODE lang="css" title="styles.css"]body{
margin: 0;
padding: 0;

}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px transparent;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear 0.5;

}

.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}

@keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}[/CODE]

[CODE lang="html" title="index.html"]<!DOCTYPE html>
<html>
<head>
<title>Circle path particles</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
</div>
</body>
</html>
[/CODE]

What I want is, for the particles to disappear after their first collision, instead of moving back to the right. I've tried thinking of possible methods, but I'm (kind of) new to css/html. Can someone please help me? Thanks,
 
Are you able to put this in a codepen so we can visualize this better? You might be able to do something with opacity, but you might also need to use some Javascript, wait the amount of time the animation takes, add a class and then use that class to do another CSS transform to fade the opacity out or hide the element.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom