Css tutorial 01

on 

CSS Tutorial 01
 Html page codes
  • Copy the below codes and  paste on notepad or another code editing tool and save as html

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Tutorial </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="loading">
            <div style="--i:1;">
                <span>Y</span>
                <span></span>
            </div>
            <div style="--i:2;">
                <span>K</span>
                <span></span>
            </div>
            <div style="--i:3;">
                <span>I</span>
                <span></span>
            </div>
            <div style="--i:4;">
                <span>N</span>
                <span></span>
            </div>
            <div style="--i:5;">
                <span>G</span>
                <span></span>
            </div>
            <div style="--i:6;">
                <span>V</span>
                <span></span>
            </div>
            <div style="--i:7;">
                <span>L</span>
                <span></span>
            </div>
            <div style="--i:8;">
                <span>O</span>
                <span></span>
            </div>
            <div style="--i:9;">
                <span>G</span>
                <span></span>
            </div>
        
            <div style="--i:10;">
                <span>S</span>
                <span></span>
            </div>
        </div>
    </body>
</html>
  • Copy and paste the following codes as style.css 
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;    
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:#c8ff01; 
}
.loading
{
    position: relative;
    width: 200px;
    height: 300px;
    transform-style:preserve-3d;
}
.loading::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 250px;
    background: rgb(255,255,255);
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
}
.loading::after
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 150px;
    background: #23e409;
}
.loading div
{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 300px;
    background: #ffff;
    transform-style:preserve-3d ;
    overflow:hidden;
    animation: animate 5s linear infinite;
    animation-delay:calc(0.5s*var(--i));
}
@keyframes animate
{
    0%
    {
        transform: perspective(500px) translate3d(0,0,0);
        opacity: 1;
        box-shadow: 5px 5px 5px rgba(0,0,0,0);
    }
    25%
    {
        transform: perspective(500px) translate3d(-50px,50px,50px);
        opacity: 1;
        box-shadow: 5px 5px 5px rgba(0,0,0,0);
    }
    35%,100%
    {
        transform: perspective(500px) translate3d(600px,-50px,0px);
        opacity: 1;
        box-shadow: 5px 5px 5px rgba(0,0,0,0);
    }
}
.loading div span
{
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8em;
    color: #fff;
    background: #23e409;
    font-weight: 600;
}
.loading div span:nth-child(2)
{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(placeholder.png);
}

Tutorial Video 
 

Comments

Post a Comment