CSS Animated Text Effects With Multiple Colors

Learn how to create CSS Animated text effects.
Author: Amli
Made with: HTML / CSS
Read More: CSS Card 3d Hover Effect Animation

HTML

<div class="container">
   <h1><span>CSS<br>POINT</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>

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%
	}
}

3 Comments

  1. […] Learn how to create CSS Animated Jumping text effects.Author: Erin E. SullivanMade with: HTML / CSSRead More: CSS Animated Text Effects With Multiple Colors […]

  2. It’s actually a cool and useful piece of information. I am glad that you simply shared this helpful info with us. Please keep us informed like this. Thanks for sharing.

  3. Absolutely pent content, Really enjoyed studying.

Leave a Reply