CSS3实现可翻转的hover效果_CSS

CSS

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: css3实现二维码扫描特效的示例下一篇:详解如何在css中引入自定义字体(...

CSS3实现可翻转的hover效果

发布时间：2022-04-13 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了CSS3实现可翻转的hover效果，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

CSS3实现可翻转的hover效果,具体代码如下所示：

1.css

/*基础样式*/  
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鼠标hover效果  前后翻转*/  
#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鼠标hover效果 上浮*/  
#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鼠标hover效果 下浮*/  
#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鼠标hover效果 左右翻转*/  
#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效果*/  
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>前后翻转</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>上浮</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>下浮</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>左右翻转</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>按钮hover效果</p>  
            <button class="btn1" tyPE="button">hover!</button>  
        </div>

效果：

总结

以上所述是小编给大家介绍的CSS3实现可翻转的hover效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本宝典网站的支持！

脚本宝典总结

以上是脚本宝典为你收集整理的CSS3实现可翻转的hover效果全部内容，希望文章能够帮你解决CSS3实现可翻转的hover效果所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：css3

上一篇: css3实现二维码扫描特效的示例下一篇:详解如何在css中引入自定义字体(...

猜你在找的CSS相关文章

全站导航更多