Pure CSS Sponge #weeklycssimages

index.html

<div class="aquarium">
  <div class="aquarium__table"></div>
  <div class="aquarium__aquarium">
    <div class="aquarium__water"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
    <div class="aquarium__bubble"></div>
  </div>
  <div class="aquarium__drops">
    <div class="aquarium__drop"></div>
    <div class="aquarium__water-column"></div>
    <div class="aquarium__splash"></div>
    <div class="aquarium__splash"></div>
  </div>
  <div class="aquarium__sponge-box">
    <div class="aquarium__body">
      <div class="aquarium__body-stripe"></div>
      <div class="aquarium__body-hole"></div>
    </div>
    <div class="aquarium__face">
      <div class="aquarium__mouth"></div>
      <div class="aquarium__smile"></div>
    </div>
  </div>
</div>

pure-css-sponge-weeklycssimages.markdown

Pure CSS Sponge #weeklycssimages

A Pen by Julia Muzafarova on CodePen.

License.

script.js

// Gal Shir image from 
// https://dribbble.com/shots/2560391-Sponge

style.scss

@use postcss-cssnext;
.aquarium {
	position: relative;
	overflow: hidden;
	background: white;
  width: 800px;
  height: 500px;
  margin: auto;

	&__table {
		position: absolute;
		width: 341px;
		height: 6px;
		left: 230px;
		top: 381px;
		border-radius: 3px;
		background: black;

		&:before {
			content: '';
			position: absolute;
			width: 131px;
			height: 19px;
			box-sizing: border-box;
			left: 105px;
			top: -15px;
			border-radius: 6px;
			border: 4px solid black;
			background: #00AAFF;
		}
	}
	&__aquarium {
		position: absolute;
		width: 209px;
		height: 148px;
		box-sizing: border-box;
		left: 296px;
		top: 223px;
		border: 5px solid black;
		border-radius: 40px 40px 50px 50px / 74px 74px 74px 74px;
		box-shadow: inset -30px 0 0 0 rgba(54, 125, 231, 0.2);
		overflow: hidden;
		z-index: 1;
	}
	&__water {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 39px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-water 2.5s linear infinite;
	}
	&__drops {
		position: absolute;
		top: 142px;
		left: 304px;
		width: 190px;
		height: 125px;
		overflow: hidden;
	}
	&__drop {
		position: absolute;
		top: 100px;
		left: 93px;
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background: #80D5FF;
		animation: sponge-drop 2.5s linear infinite;
	}
	&__water-column {
		position: absolute;
		top: 122px;
		left: 70px;
		width: 60px;
		height: 130px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-water-column 2.5s linear infinite;
	}
	&__bubble:nth-child(2) {
		position: absolute;
		left: 30px;
		top: 25px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-1 2.5s linear infinite;
	}
	&__bubble:nth-child(3) {
		position: absolute;
		left: 140px;
		top: 84px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-2 2.5s linear infinite;
	}
	&__bubble:nth-child(4) {
		position: absolute;
		left: 139px;
		top: 58px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-3 2.5s linear infinite;
	}
	&__bubble:nth-child(5) {
		position: absolute;
		left: 48px;
		top: 67px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-4 2.5s linear infinite;
	}
	&__bubble:nth-child(6) {
		position: absolute;
		left: 48px;
		top: 92px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-5 2.5s linear infinite;
	}
	&__bubble:nth-child(7) {
		position: absolute;
		left: 140px;
		top: 92px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-6 2.5s linear infinite;
	}
	&__bubble:nth-child(8) {
		position: absolute;
		left: 139px;
		top: 93px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-7 2.5s linear infinite;
	}
	&__bubble:nth-child(9) {
		position: absolute;
		left: 48px;
		top: 82px;
		width: 10px;
		height: 10px;
		transform: scale(1);
		background: white;
		border-radius: 100%;
		z-index: 2;
		animation: sponge-bubble-8 2.5s linear infinite;
	}
	&__splash:nth-child(3) {
		position: absolute;
		top: 84px;
		left: 30px;
		height: 8px;
		width: 4px;
		border-radius: 2px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-splash-1 2.5s linear infinite;

		&:before {
			content: '';
			position: absolute;
			top: 22px;
			left: -23px;
			height: 4px;
			width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
		&:after {
			content: '';
			position: absolute;
			top: 22px;
			left: 18px;
			height: 4px;
			width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
	}
	&__splash:nth-child(4) {
		position: absolute;
		top: 84px;
		left: 155px;
		height: 8px;
		width: 4px;
		border-radius: 2px;
		opacity: .5;
		background: #5bb8ff;
		animation: sponge-splash-2 2.5s linear infinite;

		&:before {
			content: '';
			position: absolute;
			top: 22px;
			left: -23px;
			height: 4px;
			width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
		&:after {
			content: '';
			position: absolute;
			top: 22px;
			left: 18px;
			height: 4px;
			width: 8px;
			border-radius: 2px;
			background: #5bb8ff;
		}
	}
	&__sponge-box {
		position: absolute;
		width: 86px;
		height: 106px;
		left: 357px;
		top: 233px;
		animation: sponge-box 2.5s linear infinite;
	}
	&__body {
		position: absolute;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		left: 0;
		top: 0;
		box-shadow: inset 0 0 0 5px black, inset -10px 0 0 5px rgba(221, 165, 33, 0.47);
		border-radius: 13px;
		background: #FAEF37;
		overflow: hidden;
		animation: sponge-body 2.5s linear infinite;

		&:before {
			content: '';
			position: absolute;
			top: 62px;
			left: 74px;
			width: 24px;
			height: 24px;
			box-sizing: border-box;
			background: white;
			border-radius: 100%;
			border: 5px solid black;
		}
		&:after {
			content: '';
			position: absolute;
			top: 93px;
			left: 14px;
			width: 24px;
			height: 24px;
			box-sizing: border-box;
			background: white;
			border-radius: 100%;
			border: 5px solid black;
		}
		&-hole {
			position: absolute;
			width: 22px;
			height: 22px;
			left: -3px;
			top: 67px;
			border-radius: 11px;
			background: rgba(0, 0, 0, 0.1);

			&:before {
				content: '';
				position: absolute;
				width: 15px;
				height: 15px;
				left: 70px;
				top: -46px;
				border-radius: 100%;
				background: rgba(0, 0, 0, 0.1);
			}
			&:after {
				content: '';
				position: absolute;
				width: 10px;
				height: 10px;
				left: 57px;
				top: 17px;
				border-radius: 100%;
				background: rgba(0, 0, 0, 0.1);
			}
		}
		&-stripe {
			position: absolute;
			width: 23px;
			height: 13px;
			left: 45px;
			top: 0;
			border-radius: 0 10px 0 0;
			border-top: 5px solid black;
			border-right: 5px solid black;

			&:before {
				content: '';
				position: absolute;
				width: 5px;
				height: 10px;
				left: 23px;
				top: 9px;
				border-radius: 3px;
				background: black;
			}
		}
	}
	&__face {
		position: absolute;
		width: 46px;
		height: 56px;
		left: 20px;
		top: 42px;

		&:before {
			content: '';
			position: absolute;
			left: 0px;
			top: 0px;
			width: 9px;
			height: 9px;
			border-radius: 100%;
			background: black;
			animation: sponge-eye 2.5s linear infinite;
		}
		&:after {
			content: '';
			position: absolute;
			left: 37px;
			top: 0px;
			width: 9px;
			height: 9px;
			border-radius: 100%;
			background: black;
			animation: sponge-eye 2.5s linear infinite;
		}
	}
	&__mouth {
		position: absolute;
		width: 20px;
		height: 14px;
		box-sizing: border-box;
		left: 13px;
		top: 14px;
		border-radius: 4px 4px 14px 14px;
		border: 3px solid black;
		border-top-width: 6px;
		background: red;
		animation: sponge-mouth 2.5s linear infinite;
	}
	&__smile {
		position: absolute;
		left: 24px;
		top: 12px;
		animation: sponge-smile 2.5s linear infinite;

		&:before {
			content: '';
			position: absolute;
			left: -10px;
			width: 6px;
			height: 6px;
			border-radius: 0 0 0 6px;
			border-bottom: 3px solid black;
			border-left: 3px solid black;
			transform: rotate(-45deg);
		}
		&:after {
			content: '';
			position: absolute;
			left: -2px;
			width: 6px;
			height: 6px;
			border-radius: 0 0 0 6px;
			border-bottom: 3px solid black;
			border-left: 3px solid black;
			transform: rotate(-45deg);
		}
	}
}

/* Анимации */
@keyframes sponge-splash-1 {
	0%		{ transform: scale(0) translateY(30px); }
	9.01%	{ transform: scale(0) translateY(30px); }
	16.84%{ transform: scale(1) translateY(0); }
	16.9%	{ transform: scale(0) translateY(0); }

	72.64%{ transform: scale(0) translateY(30px); }
	81.44%{ transform: scale(1) translateY(0); }
	81.5%	{ transform: scale(0) translateY(0); }
	100%	{ transform: scale(0) translateY(30px); }
}
@keyframes sponge-splash-2 { 
	0%		{ transform: scale(0) translateY(30px); }
	14.4%	{ transform: scale(0) translateY(30px); }
	20.64%{ transform: scale(1) translateY(0); }
	20.7%	{ transform: scale(0) translateY(0); }

	77%		{ transform: scale(0) translateY(30px); }
	83.24%{ transform: scale(1) translateY(0); }
	83.3%	{ transform: scale(0) translateY(30px); }
	100%	{ transform: scale(0) translateY(30px); }
}
@keyframes sponge-bubble-1 {
	0%	  { transform: scale(0) translate(0, 0); }
	45.9%	{ transform: scale(0) translate(8px, 16px); }
	46%	  { transform: scale(.2) translate(8px, 16px); }
	50%	  { transform: scale(1) translate(17px, 33px); }
	50.1%	{ transform: scale(0) translate(17px, 33px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-2 {
	0%	  { transform: scale(0) translate(0, 0); }
	47.9%	{ transform: scale(0) translate(0, 0); }
	48%	  { transform: scale(.2) translate(0, 0); }
	52%	  { transform: scale(1) translate(25px, -58px); }
	52.1%	{ transform: scale(0) translate(25px, -58px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-3 { 
	0%	  { transform: scale(0) translate(0, 0); }
	50.9%	{ transform: scale(0) translate(0, 0); }
	51%	  { transform: scale(.2) translate(0, 0); }
	55%	  { transform: scale(1) translate(18px, -34px); }
	55.1%	{ transform: scale(0) translate(18px, -34px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-4 { 
	0%	  { transform: scale(0) translate(0, 0); }
	52.9%	{ transform: scale(0) translate(0, 0); }
	53%	  { transform: scale(.2) translate(0, 0); }
	57%	  { transform: scale(1) translate(-10px, -42px); }
	57.1%	{ transform: scale(0) translate(-10px, -42px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-5 { 
	0%	  { transform: scale(0) translate(0, 0); }
	54.9%	{ transform: scale(0) translate(0, 0); }
	55%	  { transform: scale(.2) translate(0, 0); }
	60%	  { transform: scale(1) translate(-18px, -68px); }
	60.1%	{ transform: scale(0) translate(-18px, -68px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-6 { 
	0%	  { transform: scale(0) translate(0, 0); }
	57.9%	{ transform: scale(0) translate(0, 0); }
	58%	  { transform: scale(.2) translate(0, 0); }
	62%	  { transform: scale(1) translate(-2px, -68px); }
	62.1%	{ transform: scale(0) translate(-2px, -68px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-7 { 
	0%	  { transform: scale(0) translate(0, 0); }
	60.9%	{ transform: scale(0) translate(0, 0); }
 	61%	  { transform: scale(.2) translate(0, 0); }
	65%	  { transform: scale(1) translate(20px, -68px); }
	65.1%	{ transform: scale(0) translate(20px, -68px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-bubble-8 { 
	0%	  { transform: scale(0) translate(0, 0); }
	62.9%	{ transform: scale(0) translate(0, 0); }
	63%	  { transform: scale(.2) translate(0, 0); }
	67%	  { transform: scale(1) translate(-8px, -56px); }
	67.9%	{ transform: scale(0) translate(-8px, -56px); }
	100%	{ transform: scale(0) translate(0, 0); }
}
@keyframes sponge-eye { 
	9.36%	{ transform: scale(1); }
	9.37%	{ transform: scale(0); }	
	14.0%	{ transform: scale(0); }	
	14.01%	{ transform: scale(1); }
}
@keyframes sponge-mouth { 
	0%		{ border-radius: 4px 4px 14px 14px;
			transform: scale(1);
			background: red; }
	9.36%	{ border-radius: 4px 4px 14px 14px;
			transform: scale(0);
			background: red; }

	28.08%	{ border-radius: 100%; 
			transform: scale(0);
			background: black; }
	40.56%	{ border-radius: 100%; 
			transform: scaleY(1.4);
			background: black; }
	42.12%	{ border-radius: 100%; 
			transform: scaleY(1.4);
			background: black; }
	48.36%	{ border-radius: 100%; 
			transform: scale(0);
			background: black; }

	76.4%	{ border-radius: 4px 4px 14px 14px;
			transform: scale(0);
			background: red; }			
	76.44%	{ border-radius: 4px 4px 14px 14px;
			transform: scale(.3);
			background: red; }
	93.6%	{ border-radius: 4px 4px 14px 14px;
			transform: scale(1);
			background: red; }
	100%	{ border-radius: 4px 4px 14px 14px;
			transform: scale(1);
			background: red; }
}
@keyframes sponge-smile { 
	0%		{ opacity: 0; }
	48.2%	{ opacity: 0; }	
	48.36%	{ opacity: 1; }
	76.44%	{ opacity: 1; }
	76.5%	{ opacity: 0; }	
	100%	{ opacity: 0; }
}
@keyframes sponge-water { 
	6.24% { transform: translateY(0); }
	12.48%{ transform: translateY(-11px); }
	78%   { transform: translateY(-11px); }
	85.8% { transform: translateY(0); }
}
@keyframes sponge-drop { 
	0%		{ transform: scale(0) translate(0, 24px); }
	7%		{ transform: scale(0) translate(0, 24px); }
	15.44%{ transform: scale(2) translate(0, -36px); }
	27.8%	{ transform: scale(0) translate(0, 24px); }
	100%	{ transform: scale(0) translate(0, 24px); }
}
@keyframes sponge-water-column { 
	0%		{ transform: scaleX(0) translateY(20px); }
	7.8%	{ transform: scaleX(1) translateY(20px); }
	18.72%{ transform: scaleX(.1) translateY(-12px); }
	29.64%{ transform: scaleX(.3) translateY(28px); }
	81.12%{ transform: scaleX(1.4) translateY(28px); }
	95.16%{ transform: scaleX(0) translateY(-132px); }
	100%	{ transform: scaleX(0) translateY(-132px); }
}
@keyframes sponge-box { 
	0%		{ transform: translateY(-145px); } 
	9.36%	{ transform: translateY(20px); }
	18.72%{ transform: translateY(-5px); }
	28.08%{ transform: translateY(-7px); }
	43.68%{ transform: translateY(0px); }
	60.84%{ transform: translateY(14px); }
	78%		{ transform: translateY(14px); }
	85.8%	{ transform: translateY(-144px); }
	93.6%	{ transform: translateY(-197px); }
	100%	{ transform: translateY(-164px); }
}
@keyframes sponge-body { 
	0% 		{ transform: rotate(-134deg) scale(1) translateX(0); }
	9.36%	{ transform: rotate(0deg)    scale(1) translateX(0); }
	48.36%{ transform: rotate(0deg)    scale(1) translateX(0); }
	59.28%{ transform: rotate(0deg)    scale(.95) translateX(0); }
	60.84%{ transform: rotate(0deg)    scale(.9) translateX(-1px); }
	62.4% { transform: rotate(0deg)    scale(.9) translateX(-3px); }
	65.52%{ transform: rotate(0deg)    scale(.9) translateX(3px); }
	68.64%{ transform: rotate(0deg)    scale(.9) translateX(-3px); }
	71.76%{ transform: rotate(0deg)    scale(.9) translateX(5px); }
	74.88%{ transform: rotate(0deg)    scale(.9) translateX(-5px); }
	78%		{ transform: rotate(0deg)    scale(.9) translateX(0); }
	85.8%	{ transform: rotate(135deg)  scale(1) translateX(0); }
	93.6%	{ transform: rotate(180deg)  scale(1) translateX(0); }
  100%	{ transform: rotate(210deg)  scale(1) translateX(0); }
}