How Did They Make This Object to Glow?

Design & UX
1

Hello. I have seen this animation and lowed it: simplymeasured.com
After you scroll down a bit, you will see their glowing logo before:

[quote]Simply Measured gives you in-depth measurement
across your owned, earned & paid social media[/quote]

How do you create such effect?

2

It’s just a bit of modern CSS:

-webkit-animation: glow 1.6s ease infinite alternate;
animation: glow 1.6s ease infinite alternate;

@-webkit-keyframes glow{
	0%{text-shadow:0 0 0.35em #11f2eb,0 0 1.35em #11f2eb}
	100%{text-shadow:0 0 0.35em rgba(17,242,235,0.5),0 0 1.35em rgba(17,242,235,0.5)}
}

@keyframes glow{
	0%{text-shadow:0 0 0.35em #11f2eb,0 0 1.35em #11f2eb}
	100%{text-shadow:0 0 0.35em rgba(17,242,235,0.5),0 0 1.35em rgba(17,242,235,0.5)}
}

E.g.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
	-webkit-animation: glow 1.6s ease infinite alternate;
	animation: glow 1.6s ease infinite alternate;
	font-size: 6em;
}

@-webkit-keyframes glow{
	0%{text-shadow:0 0 0.35em #11f2eb,0 0 1.35em #11f2eb}
	100%{text-shadow:0 0 0.35em rgba(17,242,235,0.5),0 0 1.35em rgba(17,242,235,0.5)}
}

@keyframes glow{
	0%{text-shadow:0 0 0.35em #11f2eb,0 0 1.35em #11f2eb}
	100%{text-shadow:0 0 0.35em rgba(17,242,235,0.5),0 0 1.35em rgba(17,242,235,0.5)}
}
</style>
</head>
<body>

<div>H</div>

</body>
</html>
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.