CSS3 Realizes Reversible Hover Effect

Time:2019-9-6

CSS3 implements the flip-over hover effect. The specific code is as follows:

1.css

/* Basic Style*/  
html {  
    font-family: sans-serif;  
    -ms-text-size-adjust: 100%;  
    -webkit-text-size-adjust: 100%;  
}  
body {  
    margin: 0 auto;  
    text-align: center;  
    background-color: #FFFFCC;  
}  
ul {  
    list-style: none;  
    float: left;  
    margin: 0;  
    padding: 0;  
}  
a {  
    cursor: pointer;  
}  
div {  
    display: inline-block;  
    margin: 40px;  
}  
ul li {  
    width: 200px;  
    height: 40px;  
    line-height: 40px;  
    text-align: center;  
    margin: 10px;  
    background-color: #747474;  
    border-radius: 4px;  
    color: white;  
}  
dis-block{  
    display: block;  
}  
/*# Nav1 mouse hover effect flipped back and forth*/  
#nav1 ul li {  
    transform-style: preserve-3d;  
    -webkit-transform-style: preserve-3d;  
    -ms-transform-style: preserve-3d;  
    -moz-transform-style: preserve-3d;  
    transition: 0.5s;  
    -webkit-transition: 0.5s;  
    -ms-transition: 0.5s;  
    -moz-transition: 0.5s;  
}  
#nav1 ul li:hover {  
    transform: translateZ(30px) rotateX(360deg) scale(1.1);  
    -webkit-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
    -ms-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
    -moz-transform: translateZ(30px) rotateX(360deg) scale(1.1);  
}  
/*# Nav2 mouse hover effect floating*/  
#nav2 ul li {  
    transform-style: preserve-3d;  
    -webkit-transform-style: preserve-3d;  
    -ms-transform-style: preserve-3d;  
    -moz-transform-style: preserve-3d;  
    transition: 0.5s;  
    -webkit-transition: 0.5s;  
    -ms-transition: 0.5s;  
    -moz-transition: 0.5s;  
}  
#nav2 ul li:hover {  
    transform: translateZ(30px) scale(1.1);  
    -webkit-transform: translateZ(30px) scale(1.1);  
    -ms-transform: translateZ(30px) scale(1.1);  
    -moz-transform: translateZ(30px) scale(1.1);  
}  
/*# Nav4 Mouse Hover Effect Floating Down*/  
#nav4 ul li {  
    transform-style: preserve-3d;  
    -webkit-transform-style: preserve-3d;  
    -ms-transform-style: preserve-3d;  
    -moz-transform-style: preserve-3d;  
    transition: 0.5s;  
    -webkit-transition: 0.5s;  
    -ms-transition: 0.5s;  
    -moz-transition: 0.5s;  
}  
#nav4 ul li:hover {  
    transform: translateZ(30px) scale(0.9);  
    -webkit-transform: translateZ(30px) scale(0.9);  
    -ms-transform: translateZ(30px) scale(0.9);  
    -moz-transform: translateZ(30px) scale(0.9);  
}  
/*# Nav3 mouse hover effect flip left and right*/  
#nav3 ul li {  
    transform-style: preserve-3d;  
    -webkit-transform-style: preserve-3d;  
    -ms-transform-style: preserve-3d;  
    -moz-transform-style: preserve-3d;  
    transition: 0.5s;  
    -webkit-transition: 0.5s;  
    -ms-transition: 0.5s;  
    -moz-transition: 0.5s;  
}  
#nav3 ul li:hover {  
    transform: translateZ(30px) rotateY(360deg) scale(1.1);  
    -webkit-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
    -ms-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
    -moz-transform: translateZ(30px) rotateY(360deg) scale(1.1);  
}  
/* button1 hover effect*/  
btn1 {  
    background-color: #1AAB8A;  
    color: white;  
    font-size: 18px;  
    height: 60px;  
    width: 150px;  
    border: 0;  
    transition: 800ms ease all;  
    outline: none;  
    position: relative;  
}  
btn1:hover {  
    background: #fff;  
    color: #1AAB8A;  
}  
btn1:before, .btn1:after {  
    content: '';  
    position: absolute;  
    height: 2px;  
    width: 0;  
    background: #1AAB8A;  
    transition: 400ms ease all;  
}  
btn1:before {  
    right: 0;  
    top: 0;  
}  
btn1:after {  
    left: 0;  
    bottom: 0;  
}  
btn1:hover:before, .btn1:hover:after {  
    width: 100%;  
    transition: 800ms ease all;  
}

2.html

<div id="nav1">  
            <p> Back and forth flip</p>  
            <ul>  
                <li>  
                    <a>home</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jquery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav2">  
            <p> Up Floating</p>  
            <ul>  
                <li>  
                    <a>home</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jquery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav4">  
            <p> Floating down</p>  
            <ul>  
                <li>  
                    <a>home</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jquery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div id="nav3">  
            <p> Turn left and right</p>  
            <ul>  
                <li>  
                    <a>home</a>  
                </li>  
                <li>  
                    <a>js</a>  
                </li>  
                <li>  
                    <a>jquery</a>  
                </li>  
                <li>  
                    <a>div+css</a>  
                </li>  
                <li>  
                    <a>css3</a>  
                </li>  
            </ul>  
        </div>  
        <div class="dis-block">  
            <p> Button hover effect</p>  
            <button class="btn1" type="button">hover!</button>  
        </div>

Effect:



summary

Above mentioned is the CSS3 implementation of reversible hover effect introduced to you by Xiaobian. I hope it will be helpful to you. If you have any questions, please leave a message for me, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.