Scribd
Upload
19 views5 pages

Animation With Css

Uploaded by

Aafaaq Amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views5 pages

Animation With Css

Uploaded by

Aafaaq Amir
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 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