Bootstrap Snippet Autumn dots(Pure CSS Animation) using HTML CSS

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--<div class="container">
    .assembly
    - 9.times do
        .ring
            .rot
                - 96.times do
                    .dot
</div>-->
<div class='assembly'>
  <div class='ring'>
    <div class='rot'>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></div>
      <div class='dot'></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
body {
  background: #03001c;
}
div, :before, :after {
  position: absolute;
}
.assembly {
  top: 50%;
  left: 50%;
  animation: r 53.1s linear infinite reverse;
}
.ring:nth-child(1) {
  transform: rotate(0deg) translate(5.72753em);
}
.ring:nth-child(2) {
  transform: rotate(40deg) translate(5.72753em);
}
.ring:nth-child(3) {
  transform: rotate(80deg) translate(5.72753em);
}
.ring:nth-child(4) {
  transform: rotate(120deg) translate(5.72753em);
}
.ring:nth-child(5) {
  transform: rotate(160deg) translate(5.72753em);
}
.ring:nth-child(6) {
  transform: rotate(200deg) translate(5.72753em);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Autumn dots(Pure CSS Animation)"
Bootstrap 3.3.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"Autumn dots(Pure CSS Animation)" Bootstrap 3.3.0 Snippet by Opeyemi15

Related: See More

Questions / Comments:

"Autumn dots(Pure CSS Animation)"
Bootstrap 3.3.0 Snippet by Opeyemi15