Animated Blobs Text - Multiple Colors

animated-blobs-text-multiple-colors.markdown

Animated Blobs Text - Multiple Colors

Animated Blobs Text by using only CSS.

A Pen by Amli on CodePen.

License.

DEMO https://codemyui.com/animated-blob-effect-for-text/

index.html

<div class="container">
	<h1><span>THE<br>BLOBS</span></h1>
	
	<div class="blobs_1"></div>
	<div class="blobs_2"></div>
	<div class="blobs_3"></div>
	<div class="blobs_4"></div>
	<div class="blobs_5"></div>
	<div class="blobs_6"></div>
	<div class="blobs_7"></div>
</div>
	
<!-- This is not part of Pen -->
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#000"></a>

style.css

@import url('https://fonts.googleapis.com/css?family=Titan+One');

body{text-align:center}
div{display:block;position:absolute}

.container{
	width:320px;
	height:320px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
	}

h1{
	background:#fff;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	display:flex;
	font-family:'Titan One',cursive;
	font-size:90px;
	font-weight:700;
	flex-flow:row wrap;
	align-content:center;
	justify-content:center
	}

h1 span{width:100%;position:relative}

h1 span:before{
	background:linear-gradient(45deg,#fc5c7d,#6a82fb,#fc5c7d);
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	content:"";
	mix-blend-mode:screen
	}

[class*="blobs"]
	{mix-blend-mode:color;animation:blobs 15s ease-in-out infinite alternate}

.blobs_1{
	background:#ff1493;
	width:60px;
	height:60px;
	top:90px;
	left:210px
	}

.blobs_2{
	background:#ff4500;
	width:80px;
	height:80px;
	top:155px;
	left:230px
	}

.blobs_3{
	background:#00ff00;
	width:60px;
	height:60px;
	top:145px;
	left:20px
	}

.blobs_4{
	background:#ff0000;
	width:100px;
	height:100px;
	top:115px;
	left:100px
	}

.blobs_5{
	background:#ffff00;
	width:50px;
	height:50px;
	top:55px;
	left:70px
	}

.blobs_6{
	background:#00ffff;
	width:60px;
	height:60px;
	top:220px;
	left:55px
	}

.blobs_7{
	background:#ff8c00;
	width:50px;
	height:50px;
	top:210px;
	left:180px
	}

@keyframes blobs{
	0%{border-radius:26% 74% 61% 39% / 54% 67% 33% 46%}
	10%{border-radius:74% 26% 47% 53% / 68% 46% 54% 32%}
	20%{border-radius:48% 52% 30% 70% / 27% 37% 63% 73%}
	30%{border-radius:73% 27% 57% 43% / 28% 67% 33% 72%}
	40%{border-radius:63% 37% 56% 44% / 25% 28% 72% 75%}
	50%{border-radius:39% 61% 70% 30% / 61% 29% 71% 39%}
	60%{border-radius:27% 73% 29% 71% / 73% 51% 49% 27%}
	70%{border-radius:39% 61% 65% 35% / 74% 65% 35% 26%}
	80%{border-radius:55% 45% 37% 63% / 38% 30% 70% 62%}
	90%{border-radius:25% 75% 70% 30% / 39% 50% 50% 61%}
	100%{border-radius:66% 34% 33% 67% / 65% 73% 27% 35%}
	}

styles

<link href="https://codepen.io/uzcho_/pen/RmOWmw.css" rel="stylesheet" />