HTML连载71-翻转菜单练习

2021-04-14 13:27

阅读：422

YPE html>

标签：:hover 菜单 set mamicode 地址傅里叶变换 ota lang auto

一、翻转菜单练习?



D174_OverturnMenu
{

            margin:0;

            padding:0;

        }

        ul{

            width: 400px;

            height: 40px;

            margin:0 auto;

            margin-top: 100px;

            background-color: yellow;

        }

        .nav>li {

            list-style: none;

            float:left;

            width: 120px;

            height: 40px;

            margin-left:10px;

            background-color: green;

            line-height: 40px;

            text-align: center;

        }

        .sub{

            /*display: none;!*代表不显示元素*!*/

        }

        .sub>li{

            list-style: none;

            background-color: red;

            transform:rotateY(180deg);

            transition:all;

            /*opacity: 0;!*透明度，取值0-1*!*/

?

        }

        .nav>li:hover .sub li{

            transform:none;

        }

        .nav>li:hover .sub li:nth-child(1){

            transform:none;

            transition-delay:200ms;

        }

        .nav>li:hover .sub li:nth-child(2){

            transform:none;

            transition-delay:400ms;

        }

        .nav>li:hover .sub li:nth-child(3){

            transform:none;

            transition-delay:600ms;

        }

        .nav>li .sub li:nth-child(3){

            transform:none;

            transition-delay:200ms;

        }

        .nav>li .sub li:nth-child(2){

            transform:none;

            transition-delay:400ms;

        }

        .nav>li .sub li:nth-child(1){

            transform:none;

            transition-delay:600ms;

        }








一级菜单

        
二级菜单

            二级菜单

            二级菜单

        


    一级菜单

    一级菜单

技术图片

二、源码：

D174_OverturnMenu.html

D173_ShadowOfBoxAndWord.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D174_OverturnMenu.html

https://github.com/ruigege66/HTML_learning/blob/master/D173_ShadowOfBoxAndWord.html

2.CSDN：https://blog.csdn.net/weixin_44630050

3.博客园：https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包

技术图片

HTML连载71-翻转菜单练习

标签：:hover 菜单 set mamicode 地址傅里叶变换 ota lang auto

原文地址：https://www.cnblogs.com/ruigege0000/p/12375409.html

上一篇：CSS选择器有哪几种？举例轻松理解CSS选择器

下一篇：js事件委托

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：HTML连载71-翻转菜单练习
文章链接：http://soscw.com/essay/75682.html

亲，登录后才可以留言！

HTML连载71-翻转菜单练习

评论

热门文章

推荐文章

最新文章

置顶文章