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.

Recommended Today

Hadoop MapReduce Spark Configuration Item

Scope of application The configuration items covered in this article are mainly for Hadoop 2.x and Spark 2.x. MapReduce Official documents https://hadoop.apache.org/doc…Lower left corner: mapred-default.xml Examples of configuration items name value description mapreduce.job.reduce.slowstart.completedmaps 0.05 Resource requests for Reduce Task will not be made until the percentage of Map Task completed reaches that value. mapreduce.output.fileoutputformat.compress false […]