Spin Text On Mouse Hover - Mxgk99

-

Spin Text On Mouse Hover Pure Html &Css. 

Preview:



HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Spin Text</title>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<ul>
    <li>M</li>
    <li>X</li>
    <li>G</li>
    <li>K</li>
    <li>9</li>
    <li>9</li>
</ul>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    background: #ff008b;
}
ul{
padding: 50px;
margin: 0;
border: 10px solid #fff;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
ul li{
    list-style: none;
    color: #fff;
    float: left;
    font-size: 5em;
    font-family: "arial";
    transition: .9s;
}
ul:hover li{
    transform: rotateY(360deg);
}
ul:hover li:nth-child(1){
    transition-delay: .9s;
}

ul:hover li:nth-child(2){
    transition-delay: .8s;
}
ul:hover li:nth-child(3){
    transition-delay: .7s;
}
ul:hover li:nth-child(4){
    transition-delay: .6s;
}
ul:hover li:nth-child(5){
    transition-delay: .5s;
}
ul:hover li:nth-child(6){
    transition-delay: .4s;
}

Comments

Post a Comment

Popular posts from this blog

CSS Neon Effect | CSS Hover Animaton

-
Image
 How to crate CSS Neon effect Button using Html and CSS? Preview:          Click and watch:  Css Neon Effect HTML: <! DOCTYPE html > < html >     < head >         < title > Hover animation </ title >     </ head >     < body >         < h1 class = "btn" > Mxgk99 </ h1 >     </ body > </ html > CSS:         body {             font-family : sans-serif ;             background : #000 ;         }         .btn {             color : #fff ;             border : 4px solid #fff ;             padding : 30px 70px ;             width : fit-content ;             margin : 200px auto ;             font-size : 50px ;             font-style : italic ;             transition : text-shadow 1s ,box-shadow 1s ;         }         .btn:hover {             text-shadow : -2px -2px 10px #fff ,               2px 2px 10px #fff ,               0 0 20px #f10 ,               0 0 40px #f10 ,               0 0 60px #f10
Read more

Hover Animation On Button

-
Image
 How to create hover animation on Button lets learn Preview:                    Click & Watch:  Hover On Button HTML: <!DOCTYPE html> <html> <head>     <title>Hover Button</title> </head> <body> <a href="#" class="btn">Hover Me</a> </body> </html> CSS:         body{             background: #000;         }         .btn{             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%,-50%);             text-decoration: none;             font-size: 18px;             padding: 20px 60px;             color: #fff;         }         .btn::before, .btn::after{             content: '';             width: 100%;             height: 100%;             position: absolute;             top: 0;             left: 0;             box-sizing: border-box;             transition: top 0.5s,left 0.5s;         }         .btn::before{             border-left: 2px sol
Read more

Loding Animation Using HTML and CSS

-
Image
 How to create Loading animation Preview:                Click and Watch :  Loding Animation HTML: <! DOCTYPE html > < html >     < head >         < title > Loading animation </ title >     </ head >     < body >         < div class = "loading" >             < span > L </ span >             < span > O </ span >             < span > A </ span >             < span > D </ span >             < span > I </ span >             < span > N </ span >             < span > G </ span >             < span > . </ span >             < span > . </ span >         </ div >     </ body >   </ html > CSS:             * {                 margin : 0 ;                 padding : 0 ;                 font-family : sans-serif ;             }             body {                 background : #000 ;                 color : #fff ;    
Read more