移动端 CSS3菜单特效

小程序前端开发环境 建整套前端开发环境 网站前端后端实战开发案例视频

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Title</title>
    <style>
        html {
            box-sizing: border-box;
        }
        body {
            height: 100vh;
            font-family: ‘Roboto’, sans-serif;
            font-weight: 500;
            color: #fff;
            background-image: linear-gradient(to left bottom, #F2E3C6 0%, #A7A1A5 100%);
            overflow: hidden;
        }
        *,
        *:before,
        *:after {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        .nav {
            margin-top: 30px;
            text-align: center;
            width: 100%;
        }
        .nav__list {
            display: inline-block;
        }
        .nav__menu {
            float: left;
            width: 140px;
            height: 65px;
            line-height: 65px;
            text-transform: uppercase;
            background-color: #2c8fb5;
            cursor: pointer;
        }
        .nav__menu:hover {
            background-color: #226f8c;
        }
        .nav__menu:hover>.nav__menu-lists li {
            display: block;
        }
        .nav__menu:hover>.nav__menu–1-lists li:nth-child(1) {
            opacity: 0;
            animation: menu1 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 0ms;
        }
        @keyframes menu1 {
            from {
                opacity: 0;
                transform: rotateX(-180deg);
            }
            to {
                opacity: 1;
                transform: rotateX(0deg);
            }
        }
        .nav__menu:hover>.nav__menu–1-lists li:nth-child(2) {
            opacity: 0;
            animation: menu1 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 150ms;
        }
        @keyframes menu1 {
            from {
                opacity: 0;
                transform: rotateX(-180deg);
            }
            to {
                opacity: 1;
                transform: rotateX(0deg);
            }
        }
        .nav__menu:hover>.nav__menu–1-lists li:nth-child(3) {
            opacity: 0;
            animation: menu1 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 300ms;
        }
        @keyframes menu1 {
            from {
                opacity: 0;
                transform: rotateX(-180deg);
            }
            to {
                opacity: 1;
                transform: rotateX(0deg);
            }
        }
        .nav__menu:hover>.nav__menu–1-lists li:nth-child(4) {
            opacity: 0;
            animation: menu1 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 450ms;
        }
        @keyframes menu1 {
            from {
                opacity: 0;
                transform: rotateX(-180deg);
            }
            to {
                opacity: 1;
                transform: rotateX(0deg);
            }
        }
        .nav__menu:hover>.nav__menu–1-lists li:nth-child(5) {
            opacity: 0;
            animation: menu1 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 600ms;
        }
        @keyframes menu1 {
            from {
                opacity: 0;
                transform: rotateX(-180deg);
            }
            to {
                opacity: 1;
                transform: rotateX(0deg);
            }
        }
        .nav__menu:hover>.nav__menu–2-lists li:nth-child(1) {
            opacity: 0;
            transform: translateY(-100%);
            animation: menu2 ease-in-out forwards;
            animation-duration: 175ms;
            animation-delay: 0ms;
        }
        @keyframes menu2 {
            0% {
                opacity: 0;
                transform: translateY(-100%) scale(0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .nav__menu:hover>.nav__menu–2-lists li:nth-child(2) {
            opacity: 0;
            transform: translateY(-100%);
            animation: menu2 ease-in-out forwards;
            animation-duration: 175ms;
            animation-delay: 145.83333ms;
        }
        @keyframes menu2 {
            0% {
                opacity: 0;
                transform: translateY(-100%) scale(0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .nav__menu:hover>.nav__menu–2-lists li:nth-child(3) {
            opacity: 0;
            transform: translateY(-100%);
            animation: menu2 ease-in-out forwards;
            animation-duration: 175ms;
            animation-delay: 291.66667ms;
        }
        @keyframes menu2 {
            0% {
                opacity: 0;
                transform: translateY(-100%) scale(0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .nav__menu:hover>.nav__menu–2-lists li:nth-child(4) {
            opacity: 0;
            transform: translateY(-100%);
            animation: menu2 ease-in-out forwards;
            animation-duration: 175ms;
            animation-delay: 437.5ms;
        }
        @keyframes menu2 {
            0% {
                opacity: 0;
                transform: translateY(-100%) scale(0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .nav__menu:hover>.nav__menu–2-lists li:nth-child(5) {
            opacity: 0;
            transform: translateY(-100%);
            animation: menu2 ease-in-out forwards;
            animation-duration: 175ms;
            animation-delay: 583.33333ms;
        }
        @keyframes menu2 {
            0% {
                opacity: 0;
                transform: translateY(-100%) scale(0.3);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .nav__menu:hover>.nav__menu–3-lists li:nth-child(1) {
            opacity: 0;
            transform-origin: top center;
            animation: menu3 ease-in-out forwards;
            animation-duration: 200ms;
            animation-delay: 0ms;
        }
        @keyframes menu3 {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translateX(50%);
            }
            100% {
                opacity: 1;
                transform: rotate(0) translateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–3-lists li:nth-child(2) {
            opacity: 0;
            transform-origin: top center;
            animation: menu3 ease-in-out forwards;
            animation-duration: 200ms;
            animation-delay: 153.84615ms;
        }
        @keyframes menu3 {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translateX(50%);
            }
            100% {
                opacity: 1;
                transform: rotate(0) translateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–3-lists li:nth-child(3) {
            opacity: 0;
            transform-origin: top center;
            animation: menu3 ease-in-out forwards;
            animation-duration: 200ms;
            animation-delay: 307.69231ms;
        }
        @keyframes menu3 {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translateX(50%);
            }
            100% {
                opacity: 1;
                transform: rotate(0) translateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–3-lists li:nth-child(4) {
            opacity: 0;
            transform-origin: top center;
            animation: menu3 ease-in-out forwards;
            animation-duration: 200ms;
            animation-delay: 461.53846ms;
        }
        @keyframes menu3 {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translateX(50%);
            }
            100% {
                opacity: 1;
                transform: rotate(0) translateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–3-lists li:nth-child(5) {
            opacity: 0;
            transform-origin: top center;
            animation: menu3 ease-in-out forwards;
            animation-duration: 200ms;
            animation-delay: 615.38462ms;
        }
        @keyframes menu3 {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translateX(50%);
            }
            100% {
                opacity: 1;
                transform: rotate(0) translateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–4-lists li:nth-child(1) {
            opacity: 0;
            transform-origin: top center;
            animation: menu4 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 0ms;
        }
        @keyframes menu4 {
            0% {
                opacity: 0;
                transform: rotateY(-90deg) rotateX(-90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0) rotateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–4-lists li:nth-child(2) {
            opacity: 0;
            transform-origin: top center;
            animation: menu4 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 125ms;
        }
        @keyframes menu4 {
            0% {
                opacity: 0;
                transform: rotateY(-90deg) rotateX(-90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0) rotateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–4-lists li:nth-child(3) {
            opacity: 0;
            transform-origin: top center;
            animation: menu4 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 250ms;
        }
        @keyframes menu4 {
            0% {
                opacity: 0;
                transform: rotateY(-90deg) rotateX(-90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0) rotateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–4-lists li:nth-child(4) {
            opacity: 0;
            transform-origin: top center;
            animation: menu4 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 375ms;
        }
        @keyframes menu4 {
            0% {
                opacity: 0;
                transform: rotateY(-90deg) rotateX(-90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0) rotateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–4-lists li:nth-child(5) {
            opacity: 0;
            transform-origin: top center;
            animation: menu4 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 500ms;
        }
        @keyframes menu4 {
            0% {
                opacity: 0;
                transform: rotateY(-90deg) rotateX(-90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0) rotateX(0);
            }
        }
        .nav__menu:hover>.nav__menu–5-lists li:nth-child(1) {
            opacity: 0;
            animation: menu5 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 0ms;
        }
        @keyframes menu5 {
            0% {
                opacity: 0;
                transform: rotateY(90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0);
            }
        }
        .nav__menu:hover>.nav__menu–5-lists li:nth-child(2) {
            opacity: 0;
            animation: menu5 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 125ms;
        }
        @keyframes menu5 {
            0% {
                opacity: 0;
                transform: rotateY(90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0);
            }
        }
        .nav__menu:hover>.nav__menu–5-lists li:nth-child(3) {
            opacity: 0;
            animation: menu5 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 250ms;
        }
        @keyframes menu5 {
            0% {
                opacity: 0;
                transform: rotateY(90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0);
            }
        }
        .nav__menu:hover>.nav__menu–5-lists li:nth-child(4) {
            opacity: 0;
            animation: menu5 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 375ms;
        }
        @keyframes menu5 {
            0% {
                opacity: 0;
                transform: rotateY(90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0);
            }
        }
        .nav__menu:hover>.nav__menu–5-lists li:nth-child(5) {
            opacity: 0;
            animation: menu5 ease-in-out forwards;
            animation-duration: 300ms;
            animation-delay: 500ms;
        }
        @keyframes menu5 {
            0% {
                opacity: 0;
                transform: rotateY(90deg);
            }
            100% {
                opacity: 1;
                transform: rotateY(0);
            }
        }
        .nav__menu-lists {
            perspective: 5000px;
        }
        .nav__menu-items {
            display: none;
            width: 140px;
            height: 65px;
            background-color: #2c8fb5;
        }
        .nav__menu-items:hover {
            background-color: #226f8c;
        }
        .nav__menu:nth-child(1) {
            border-top-left-radius: 10px;
        }
        .nav__menu:last-child {
            border-top-right-radius: 10px;
        }
        .stuff {
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
        }
        .stuff .pens {
            margin-right: 20px;
            text-decoration: none;
            font-size: 20px;
            color: #333;
        }
        .stuff .pens:hover {
            text-decoration: underline;
        }
        .stuff .fa-twitter {
            position: relative;
            top: 8px;
            color: #1DA1F2;
            font-size: 50px;
        }
        /*# sourceMappingURL=a.css.map */
    </style>
</head>
<body>
    <nav class=’nav’>
        <ul class=’nav__list’>
            <li class=’nav__menu’>menu
                <ul class=’nav__menu-lists nav__menu–1-lists’>
                    <li class=’nav__menu-items’>Etiam</li>
                    <li class=’nav__menu-items’>Lectus</li>
                    <li class=’nav__menu-items’>Netus</li>
                    <li class=’nav__menu-items’>Dictum</li>
                    <li class=’nav__menu-items’>Nibh</li>
                </ul>
            </li>
            <li class=’nav__menu’>menu
                <ul class=’nav__menu-lists nav__menu–2-lists’>
                    <li class=’nav__menu-items’>Etiam</li>
                    <li class=’nav__menu-items’>Dictum</li>
                    <li class=’nav__menu-items’>Nibh</li>
                    <li class=’nav__menu-items’>Lectus</li>
                    <li class=’nav__menu-items’>Netus</li>
                </ul>
            </li>
            <li class=’nav__menu’>menu
                <ul class=’nav__menu-lists nav__menu–3-lists’>
                    <li class=’nav__menu-items’>Netus</li>
                    <li class=’nav__menu-items’>Lectus</li>
                    <li class=’nav__menu-items’>Nibh</li>
                    <li class=’nav__menu-items’>Etiam</li>
                    <li class=’nav__menu-items’>Dictum</li>
                </ul>
            </li>
            <li class=’nav__menu’>menu
                <ul class=’nav__menu-lists nav__menu–4-lists’>
                    <li class=’nav__menu-items’>Lectus</li>
                    <li class=’nav__menu-items’>Etiam</li>
                    <li class=’nav__menu-items’>Netus</li>
                    <li class=’nav__menu-items’>Dictum</li>
                    <li class=’nav__menu-items’>Nibh</li>
                </ul>
            </li>
            <li class=’nav__menu’>menu
                <ul class=’nav__menu-lists nav__menu–5-lists’>
                    <li class=’nav__menu-items’>Lectus</li>
                    <li class=’nav__menu-items’>Etiam</li>
                    <li class=’nav__menu-items’>Netus</li>
                    <li class=’nav__menu-items’>Dictum</li>
                    <li class=’nav__menu-items’>Nibh</li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

如何快速开发网站前端 前端开发环境 有哪几种 网站前端开发流程图

» 本文来自:前端开发者 » 《移动端 CSS3菜单特效》
» 本文链接地址:https://www.rokub.com/5437.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!