How to make pure CSS3 cartoon jellyfish animation

How to make pure CSS3 cartoon jellyfish animation: BY Samuel24 Nov,2020; Tags:
CSS3 Animation

Introduction

Today we are sharing another pure CSS3 cartoon jellyfish animation. The jellyfish is drawn through HTML and CSS code. At the same time, the animation features of CSS3 allow the jellyfish to swim continuously, and the effect is very realistic.

How to make pure CSS3 cartoon jellyfish animation

Instructions

HTML Body Code

<div class="datouwang">
	<div class="arms">
		<div class="arm" style="--scaleX:1;--scaleY:1;--rotate:3;"></div>
		<div class="arm" style="--scaleX:1;--scaleY:1.1;--rotate:2;"></div>
		<div class="arm" style="--scaleX:1;--scaleY:1.2;--rotate:1;"></div>
		<div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:0;"></div>
		<div class="arm" style="--scaleX:-1;--scaleY:1.1;--rotate:0;"></div>
		<div class="arm" style="--scaleX:-1;--scaleY:1;--rotate:-1;"></div>
		<div class="arm" style="--scaleX:-1;--scaleY:1.15;--rotate:-2;"></div>
		<div class="arm" style="--scaleX:.5;--scaleY:1.15;--rotate:-3;"></div>
	</div>
	<div class="tentacles">
		<div class="tentacle"></div>
		<div class="tentacle"></div>
		<div class="tentacle"></div>
		<div class="tentacle"></div>
		<div class="tentacle"></div>
	</div>
	<div class="guts"></div>
	<div class="body">
		<div class="base"></div>
	</div>
	<div class="eyes">
		<div class="eye left">
			<div class="eyelid"></div>
		</div>
		<div class="eye right">
			<div class="eyelid"></div>
		</div>
	</div>
</div>

Css Code

.datouwang {
  font-size: 4vmin;
  position: relative;
  filter: drop-shadow(0 0 1em cyan);
  height: 14em;
  animation: swim 10s ease-in-out infinite;
  transform-origin: 50% 0;
  transform: translateY(3em);
  margin: 10px auto;
  width: 200px;
}
.datouwang .arms {
  transform-origin: 50% 0;
  animation: squash 10s ease-in-out infinite;
}
.datouwang .arms .arm {
  position: absolute;
  width: 2em;
  height: 6em;
  top: 3em;
  border-radius: 50%;
  border-left: 1em solid #ccffff;
  border-bottom: 0.3em solid transparent;
  transform-origin: 50% 0;
  opacity: 0.4;
  transform: scaleX(var(--scaleX)) scaleY(var(--scaleY)) rotate(calc(var(--rotate) * 1deg));
  animation: wave 10s ease-in-out infinite;
}
.datouwang .arms .arm:before {
  content: '';
  position: absolute;
  width: 1.6em;
  height: 3em;
  top: 5.1em;
  left: -1.5em;
  border-radius: 50%;
  border-right: 0.6em solid #ccffff;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  transform: rotate(-10.4deg);
}

VIEW NOW