Jump to content

onclick to move back and forth


kadi

Recommended Posts

so how can i assign a button to move red ball back and forth to avoid collision from blue ball. if collided then the blue ball should stop rotating.
[CODE]<div class="circle">  <div class="ball_blue"></div>  <div class="ball_red"></div></div>* {  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}@keyframes rot {  from {    transform: rotate(0deg)      translate(-150px)      rotate(0deg);  }  to {    transform: rotate(360deg)      translate(-150px)       rotate(-360deg);  }}.circle {  border:1px solid grey;  position: relative;  width:300px;  height:300px;  margin:25px auto;  border-radius:50%;}.ball_blue {  width: 40px;  height: 40px;  position: absolute;  top:50%;  left:50%;  margin-top: -20px;  ;  background:blue;  border-radius:50%;  font-size: 100px;  animation: rot 3s infinite linear;}.ball_red {  width: 20px;  height: 20px;  position: absolute;  background:red;  border-radius:50%;  /* INITIALLY CENTERED */  top:50%;  left:50%;  margin-top: -10px;  ;  /* PUSH TO CIRCLE */  transform: translate(-150px);  /* PUSH OUT OF CIRCLE */  ;}[/CODE]

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...