How to animate a text in HTML




Code of index.html:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Index</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <span class="text1">welcome In</span>
        <span class="text2">Code Creator</span>
    </div>

</body>
</html>

Code of style.css:

*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

body{
    background-color: white;
}

.container{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

.container span{
    text-transform: uppercase;
    display: block;
}

.text1{
    color: #444;
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 8px;
    margin-bottom: 20px;
    background-color: white;
    position: relative;
    animation: text 3s 1;
}

.text2{
    color: #444;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 8px;
    margin-bottom: 20px;
    background-color: white;
    position: relative;
    animation: text 3s 1;
}

@keyframes text{
    0%{
        color: white;
    }

    30%{
        letter-spacing: 25px;
    }

    85%{
        letter-spacing: 8px;
    }
}

Comentarios

Publicar un comentario

Entradas populares de este blog

How to do an Email Bomber with Python

Imagen
Code: import smtplib  #for SMTP Protocol import mimetypes #converts URL import sys #for System import time #time from email.MIMEText import MIMEText class SMTP(object):       def title(self):             print ("       PYTHON MAIL BOMBER IS WORKING :) ")       def SMTPconnect(self):             print( "We are in the SMTPconnect") #list of SMTP server - http://www.e-eeasy.com/SMTPServerList.aspx             self.smtpserver=raw_input("\nEnter SMTP server: ")             self.smtpport=input("Enter SMTP port (Usualy 25 or 465): ")             try:               ...
Leer más

How to make a Christmas animation in HTML

Imagen
Code of index.html : <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>HAPPY NEW YEAR</title>     <style>         body {             background-color: #424f6f;         }         h1 {             color: white;             margin-top: 250px;             font-size: 50px;             text-align: center;         }     </style> </head> <body> <h1 id="messageLabel"></h1> <script> var message = "Ha...
Leer más

Chat with Firebase

Imagen
Code of index.html : <!DOCTYPE HTML> <html>    <head> <!-- Scripts jQuery, bootstrap --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>               <!-- Estilos  bootstrap, chat--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="css.css" >       <!-- área de código Firebase y lectura de Mensajes-->        <script src="https://www.gstatic.com/firebasejs/5.6.0/firebase.js"></script>   <script>      // Init...
Leer más