当前位置: 游戏平台 > 互联网科技 > 正文

非常酷的CSS3垂直下拉动画菜单

时间:2019-11-23 17:14来源:互联网科技
互联网,今天笔者向大家介绍了大器晚成款包容性不错的jQuery淡入淡出下拉菜单,前不久要享用生龙活虎款相对靓丽的CSS3垂直下推动漫菜单,可是必要协理CSS3的浏览器能力有效果。上

互联网,今天笔者向大家介绍了大器晚成款包容性不错的jQuery淡入淡出下拉菜单,前不久要享用生龙活虎款相对靓丽的CSS3垂直下推动漫菜单,可是必要协理CSS3的浏览器能力有效果。上面是意义图,一同看看。

互联网 1


上边来深入分析一下源代码,首先是HTML代码:

                    Home
                    sweet home





                    About us
                    sweet home





                    Features
                    sweet home





                    News
                    sweet home





                    Blog
                    what they say


                    Mission

                        Our Team

                            Leyla Sparks

                                Gleb Ismailov

                                    About
                                    Skills


                            Viktoria Gibbers


                    Rewards
                    Certificates





                    Portfolio
                    sweet home





                    Contacts
                    drop a line

此间用ul构造了菜单的着力社团。

接下去就动用CSS3代码来兑现菜单的下拉和卡通片效果。

CSS代码相比麻烦,这里作者只是提供一些基本的CSS代码,完整的代码我们能够在小说最终下载学习。

那是鼠标滑过菜单项时的动漫片代码:

{:;:;:;:;:;:;
}{:;:;:;:;:;:;
}{:;:;:;:;:;:;
}{:;:;:;:;:;:;
}{:;
}

以下定义了鼠标滑过后文字Logo滑过的动漫片,分别是从最上端划入,从右侧划入,从右边划入:

{:;:;:;:;:;:;
    }{:;:;:;:;:;:;
    }{:;:;:;:;:;:;
    }{:;:;:;:;:;:;
    }{:;:;:;:;:;:;
    }{:;:;:;:;:;:;
    }

最终,把源代码分享一下,下载地址>>

...

编辑:互联网科技 本文来源:非常酷的CSS3垂直下拉动画菜单

关键词: