HEADER ADS 728X90

How To Add Animated Text In Website | Code Prime

Abdullah sheikh,css,html,php,javascript,tutorial,code prime,code prime youtube chanel,web development,html css website design,css animation,how to animate,animated text,css animation tutorial,css animation effects,animated text on website,how to make animated text in website,how to add animated text,css animated text shadow,css animated text effects,animation websites,animation website design,how to,how to add gradient text,gradioent text,codeprime, coding tutorial, how to learn coding easy way to learn coding

Hi dear welcome to "CodePrime" Blog . In this post you are going to learn How To Add Animated Text In Website | Code Prime. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animated text </title>
</head>
<body>

    <div class="animate-text">
        <h1><span>how to</span>  add<br> <span> animated</span> text<br> using <span>css</span></h1>
    </div>
   
</body>
</html>

CSS

 body{
        width: 100%;
        background: url(/img/back-bg.png);
        background-repeat: no-repeat;
        height: 100vh;
        background-size: cover;
    }
    .animate-text{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30vh;
        text-align: center;
    }
    h1{
        color: #fff;
        text-transform: uppercase;
        font-family: sans-serif;
        letter-spacing: 2px;
        font-size: 3rem;
    }
    span{
        color: transparent;
        background: url(/img/back-btn-bg.png);
        background-size: cover;
        background-clip: text;
        -webkit-background-clip: text;
       
       
       
    }

Youtube Tutorial

FLOW US ON SOCIAL MEDIA

Post a Comment

0 Comments

Join Telegram