| Code Hunter | Welcome back again another tutorial today we have source code for How to make animated text effect as Tiktok as output given below...
TikTok
This effect is creating by HTML & CSS. Source code is giving below.
If you have any query comment us. We are here to hear from you. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Tiktok Text ANimation Efffects</title>
</head>
<style>
body{
margin:0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.ur_code h2{
color:#fff;
font-family: sans-serif;
font-size: 4em;
animation: animate 0.5s linear infinite;
background: black;
padding:5px;
}
@keyframes animate {
0%,100%
{
text-shadow: -1.5px -1.5px 0 #0ff,1.5px 1.5px 0 #f00;
}
25%
{
text-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;
}
50%
{
text-shadow: 1.5px 1.5px 0 #0ff,-1.5px 1.5px 0 #f00;
}
75%
{
text-shadow: -1.5px 1.5px 0 #0ff,1.5px -1.5px 0 #f00;
}
}
</style>
<body>
<div class="ur_code">
<h2>TikTok</h2>
</div>
</body>
</html>
<html>
<head>
<title>Tiktok Text ANimation Efffects</title>
</head>
<style>
body{
margin:0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.ur_code h2{
color:#fff;
font-family: sans-serif;
font-size: 4em;
animation: animate 0.5s linear infinite;
background: black;
padding:5px;
}
@keyframes animate {
0%,100%
{
text-shadow: -1.5px -1.5px 0 #0ff,1.5px 1.5px 0 #f00;
}
25%
{
text-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;
}
50%
{
text-shadow: 1.5px 1.5px 0 #0ff,-1.5px 1.5px 0 #f00;
}
75%
{
text-shadow: -1.5px 1.5px 0 #0ff,1.5px -1.5px 0 #f00;
}
}
</style>
<body>
<div class="ur_code">
<h2>TikTok</h2>
</div>
</body>
</html>
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comments:
Post a Comment