octopus | pure CSS

In this example below you will see how to do a octopus | pure CSS with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>octopus | pure CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="tentacle _1" style="--index:1;--flip:0;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _2" style="--index:2;--flip:0;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _3" style="--index:3;--flip:0;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _4" style="--index:0;--flip:0;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _5" style="--index:1;--flip:1;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _6" style="--index:2;--flip:1;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _7" style="--index:3;--flip:1;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="tentacle _8" style="--index:0;--flip:1;">    
  <div style="--delay:0s;">
    <div style="--delay:-0.19999999999999973s;">
      <div style="--delay:-0.3999999999999999s;">
        <div style="--delay:-0.5999999999999996s;">
          <div style="--delay:-0.7999999999999998s;">
            <div style="--delay:-1s;">
              <div style="--delay:-1.1999999999999997s;">
                <div style="--delay:-1.4s;">
                  <div style="--delay:-1.5999999999999996s;">
                    <div style="--delay:-1.7999999999999998s;">
                      <div style="--delay:-2s;">
                        <div style="--delay:-2.2s;">
                          <div style="--delay:-2.4s;">
                            <div style="--delay:-2.5999999999999996s;">
                              <div style="--delay:-2.8s;">
                                <div style="--delay:-3s;">
                                  <div style="--delay:-3.2s;">
                                    <div style="--delay:-3.4s;">
                                      <div style="--delay:-3.6s;">
                                        <div style="--delay:-3.8s;">
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="head"></div>
  
  

</body>

</html>


/*Downloaded from https://www.codeseek.co/pixelass/octopus-orandxa0pure-css-vRpwqP */
body {
  font-size: 40px;
  overflow: hidden;
  background: DarkSeaGreen;
}

.head {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 5em;
  width: 5em;
  margin: -2.5em;
  background: GoldenRod;
  z-index: 5;
  border-radius: 100% 100% 30%;
  transform: translateY(-3em) rotate(45deg);
  box-shadow: 0.2em 0.2em 0 0.24em #d6a21f inset, -0.1em -0.1em 0 0.1em #dcaa2b inset;
}
.head:before, .head:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  height: 0.8em;
  width: 0.8em;
  border-radius: 100%;
  box-shadow: 0.1em 0.1em 0 0.2em white inset;
}
.head:before {
  transform: translate(1em, 2em);
}
.head:after {
  transform: translate(2em, 1em);
}

.tentacle {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.5em -0.5em;
  transform-origin: 50% 50%;
  height: 3em;
  width: 1em;
  z-index: calc(4 - var(--index));
  transform: translate3d(calc(-0.5em + 1em * var(--flip)), calc(0.3em * var(--index)), 0) rotateX(calc(180deg * var(--flip))) rotate(calc(200deg + 15deg * var(--index) + 180deg * var(--flip)));
}
.tentacle div {
  font-size: 0.9em;
  height: 3em;
  width: 1em;
  border-radius: 100% 100%;
  background: GoldenRod;
  box-shadow: 0.1em -0.8em 0 #dcaa2b inset, 0 0 0 0.3em #d6a21f inset;
  position: absolute;
  top: 25%;
  left: 50%;
  animation: rot 3s ease-in-out alternate infinite;
}
.tentacle div:before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 100%;
  background: salmon;
  height: 0.7em;
  width: 0.3em;
  margin: -0.35em -0.15em;
  border-radius: 100%;
  box-shadow: -0.1em 0.1em 0 #c8665b inset, 0 0 0 0.1em #d56d61 inset;
}
.tentacle div div {
  top: auto;
  bottom: 1em;
  left: auto;
  right: 0;
  transform: rotate(5deg);
  transform-origin: 100% 100%;
  animation-delay: var(--delay, 0s);
}

@keyframes rot {
  0% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

Comments

More from ⁣

pure CSS DNA

pure CSS DNA

By pixelass
Live editing text on a canvas

Live editing text on a canvas

By pixelass
3d eye |&#xA0;pure CSS

3d eye | pure CSS

By pixelass
element queries concept

element queries concept

By ⁣

You Might Also Like

Blurry Boxes

Blurry Boxes

By billbrown
A Pen by Vladislav

A Pen by Vladislav

By Pashechko
A Pen by recentstudent

A Pen by recentstudent

By RecentStudent
Starsweeper 0.5 beta

Starsweeper 0.5 beta

By godoy
login screen

login screen

By andrewrock
Ralph H. Baer Tribute page

Ralph H. Baer Tribute page

By GeorgeShkan
A Pen by Bryan Farris

A Pen by Bryan Farris

By bryanfarris
Portfolio2

Portfolio2

By Freedom41
© 2018 - Copyright CodeSeek.co
contact email