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,
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,