Scribd Logo
Upload

Welcome to Scribd!

  • Animation With Css

    Uploaded by

    Aafaaq Amir
    2 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views5 pages

    Animation With Css

    Uploaded by

    Aafaaq Amir

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Do as directed

    Objective Creation of Login Form


    Step 1:
    1. Right click and open notepad
    2. Paste code written below
    3. Save the file firstweb.html

    Write this below code in your Notepad

    <html>
    <head>
    <styles>

    </styles>

    </head>

    <body>

    </body>
    </html>

    Write this code in Style section ?


    @import
    url('https://fonts.googleapis.com/css2?f
    amily=Poppins:wght@900&display=swa
    p');
    body {
    height:100vh;
    font-family: 'Poppins', sans-serif;
    font-size:12vw;
    text-transform: uppercase;
    overflow: hidden;
    }
    .disappear {
    position: absolute;
    left:0;
    right:0;
    margin: auto;
    width:100%;
    text-align: center;
    height:fit-content;
    bottom:0;
    top:0;
    }
    .disappear span {
    display: inline-block;
    color:transparent;
    text-shadow: 0px 0px 0px black;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    }
    .disappear span:nth-child(1){
    animation-name: disappearleft;
    }
    .disappear span:nth-child(2){
    animation-name: disappearleft;
    animation-delay: .3s;
    }
    .disappear span:nth-child(3){
    animation-name: disappearight;
    animation-delay: .6s;
    }
    .disappear span:nth-child(4){
    animation-name: disappearleft;
    animation-delay: .8s;
    }
    .disappear span:nth-child(5){
    animation-name: disappearight;
    animation-delay: 1s;
    }
    .disappear span:nth-child(6){
    animation-name: disappearight;
    animation-delay: 1.3s;
    }
    .disappear span:nth-child(7){
    animation-name: disappearleft;
    animation-delay: 1.6s;
    }
    .disappear span:nth-child(8){
    animation-name: disappearight;
    animation-delay: 2s;
    }
    .disappear span:nth-child(9){
    animation-name: disappearight;
    animation-delay: 2.3s;
    }
    @keyframes disappearleft{
    50% {transform: skew(50deg)
    translateY(-200%);
    text-shadow: 0px 0px 50px;
    opacity: 0;
    }
    }
    @keyframes disappearight{
    50% {transform: skew(-50deg)
    translateY(-200%);
    text-shadow: 0px 0px 50px;
    opacity: 0;
    }
    }

    Write this code in body section?

    <div class="disappear">
    <span>U</span> <span>E</span> <span>T</span> <span>T</span> <span>A</span> <span>X</span>
    <span>I</span> <span>L</span> <span>A</span>
    </div

    You might also like