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

A Pen by Marco Antonio Lopez Rodriguez

A Pen by Marco Antonio Lopez Rodriguez

By marodrig
Text shadow as outline

Text shadow as outline

By stephaniehobson
A Pen by &#x410;

A Pen by А

By LeoPoli
A Pen by Samuel Colburn

A Pen by Samuel Colburn

By smcolburn
Proposed Cuipo Profile Design

Proposed Cuipo Profile Design

By K4TAY
IScroll + Visible Demo

IScroll + Visible Demo

By egjs
FreeCodeCamp: Show the Local Weather

FreeCodeCamp: Show the Local Weather

By lalov1
Sneeze the dragon

Sneeze the dragon

By Yakudoo
© 2018 - Copyright CodeSeek.co
contact email