Bootstrap Snippet Circle Intersection Animation using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="container">
  <div id='mover' class='dot'></div>
  <div id='origin' class='dot'></div>
  <div id='left' class='circle'></div>
  <div id='right' class='circle'></div>
    <div id='top' class='circle'></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#container {
  width: 100vw;
  height: 100vh;
}
.dot {
  position: absolute;
  left: calc(50% - 10px);
  top: calc(50% - 10px);
  background-color: red;
  width: 20px;
  height: 20px;
  border-radius: 50px;
}
#mover {
  animation: pedal1 1s linear infinite;
}
.circle {
  position: absolute;
  left: calc(50% - 75px);
  top: calc(50% - 75px);
  width: 150px;
  height: 150px;
  border-radius: 150px;
  border: 1px solid blue;
}
#left {
  left: calc(50% - 75px - 50px);
}
#right {
  left: calc(50% - 75px + 50px);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Circle Intersection Animation"
Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"Circle Intersection Animation" Bootstrap 4.1.1 Snippet by divyalahad

Related: See More

Questions / Comments:

"Circle Intersection Animation"
Bootstrap 4.1.1 Snippet by divyalahad