Interlocking Rings

In this example below you will see how to do a Interlocking Rings with some HTML / CSS and Javascript

Animated chain of rings. Each ring is a single div.

Thumbnail
This awesome code was written by Will Boyd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Will Boyd ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Interlocking Rings</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      *, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  background: #000 radial-gradient(#2f434e, #000);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1050px;
  padding-left: 50px;
}

.ring {
  position: relative;
  float: left;
  height: 150px;
  width: 150px;
  margin-left: -50px;
  animation: float 3s infinite;
}
.ring:nth-child(2n + 1) {
  color: #be427b;
}
.ring:nth-child(2n) {
  color: #fff;
}
.ring:nth-child(1) {
  animation-delay: -0.25s;
}
.ring:nth-child(1)::after {
  z-index: 10;
}
.ring:nth-child(2) {
  animation-delay: -0.5s;
}
.ring:nth-child(2)::after {
  z-index: 9;
}
.ring:nth-child(3) {
  animation-delay: -0.75s;
}
.ring:nth-child(3)::after {
  z-index: 8;
}
.ring:nth-child(4) {
  animation-delay: -1s;
}
.ring:nth-child(4)::after {
  z-index: 7;
}
.ring:nth-child(5) {
  animation-delay: -1.25s;
}
.ring:nth-child(5)::after {
  z-index: 6;
}
.ring:nth-child(6) {
  animation-delay: -1.5s;
}
.ring:nth-child(6)::after {
  z-index: 5;
}
.ring:nth-child(7) {
  animation-delay: -1.75s;
}
.ring:nth-child(7)::after {
  z-index: 4;
}
.ring:nth-child(8) {
  animation-delay: -2s;
}
.ring:nth-child(8)::after {
  z-index: 3;
}
.ring:nth-child(9) {
  animation-delay: -2.25s;
}
.ring:nth-child(9)::after {
  z-index: 2;
}
.ring:nth-child(10) {
  animation-delay: -2.5s;
}
.ring:nth-child(10)::after {
  z-index: 1;
}
.ring::before, .ring::after {
  content: '';
  position: absolute;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: solid 20px;
  transform: rotate(45deg);
}
.ring::after {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

@keyframes float {
  50% {
    margin-top: -20px;
    margin-left: -60px;
  }
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <div class='content'>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
  <div class='ring'></div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/lonekorean/interlocking-rings-GrqKD */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  background: #000 radial-gradient(#2f434e, #000);
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1050px;
  padding-left: 50px;
}

.ring {
  position: relative;
  float: left;
  height: 150px;
  width: 150px;
  margin-left: -50px;
  animation: float 3s infinite;
}
.ring:nth-child(2n + 1) {
  color: #be427b;
}
.ring:nth-child(2n) {
  color: #fff;
}
.ring:nth-child(1) {
  animation-delay: -0.25s;
}
.ring:nth-child(1)::after {
  z-index: 10;
}
.ring:nth-child(2) {
  animation-delay: -0.5s;
}
.ring:nth-child(2)::after {
  z-index: 9;
}
.ring:nth-child(3) {
  animation-delay: -0.75s;
}
.ring:nth-child(3)::after {
  z-index: 8;
}
.ring:nth-child(4) {
  animation-delay: -1s;
}
.ring:nth-child(4)::after {
  z-index: 7;
}
.ring:nth-child(5) {
  animation-delay: -1.25s;
}
.ring:nth-child(5)::after {
  z-index: 6;
}
.ring:nth-child(6) {
  animation-delay: -1.5s;
}
.ring:nth-child(6)::after {
  z-index: 5;
}
.ring:nth-child(7) {
  animation-delay: -1.75s;
}
.ring:nth-child(7)::after {
  z-index: 4;
}
.ring:nth-child(8) {
  animation-delay: -2s;
}
.ring:nth-child(8)::after {
  z-index: 3;
}
.ring:nth-child(9) {
  animation-delay: -2.25s;
}
.ring:nth-child(9)::after {
  z-index: 2;
}
.ring:nth-child(10) {
  animation-delay: -2.5s;
}
.ring:nth-child(10)::after {
  z-index: 1;
}
.ring::before, .ring::after {
  content: '';
  position: absolute;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: solid 20px;
  transform: rotate(45deg);
}
.ring::after {
  border-right-color: transparent;
  border-bottom-color: transparent;
}

@keyframes float {
  50% {
    margin-top: -20px;
    margin-left: -60px;
  }
}

Comments