ANIMATION AND TRANSITIONS CSS FILE

-

 body{

    height: 100vh;
background-color: black;
display: flex;
justify-content:center ;
align-items: center;
}
header{
    color: white;
    position: absolute;
    top: 0;
    font-size: xx-large;
    text-transform: uppercase;
    text-align: center;
}
#container{
background-color: rgba(205, 21, 0, 0.978);
border: 2px solid;
height: 200px;
width: 200px;
/* transform: rotate(30deg);
transform: skew(130deg);
transform: scaleX(4);
transform: scaleY(4);
transform: scaleZ(4); */
transition: transform 1s ease, background-color 1s linear,
border 1s linear,border-radius 1s ease;

}

#container:hover{
    transform: rotate(57deg)  translate(20px);
    background-color: rgb(13, 129, 67);
    border: 5px solid white;
    border-radius: 50%;
}

Comments

Post a Comment

Popular posts from this blog

HTML FORMS

-
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < H1 > Forms in HTML </ H1 >     < form action = "/submit.php" > < div >   < label for = "Name" > Name </ label >   < input type = "text" placeholder = "Enter name" > </ div > < div >     < label for = "Phone" > Phone </ label >     < input type = "tel" placeholder = "Enter phone no." >     </ div >     < div >     < label for = "Email" > Email </ label >     < input type = "email" placeholder = "Email" >     </ div >     < div >     < l...
Read more

FORM STYLING IN CSS

-
<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...
Read more