十个HTML+CSS动画菜单

于 2022-12-14 16:25:30 发布
阅读量883 收藏 3
点赞数 1
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Proction/article/details/128317908
版权
本文展示了十个使用HTML和CSS创建的动画菜单实例，包括各种不同效果的菜单布局和对应的HTML、CSS代码。通过这些实例，读者可以学习到如何为菜单栏添加动态效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天我们用HTML+CSS做菜单栏动画

代码只展示下面菜单栏布局代码

第一种

效果图

html代码部分（全）

<!DOCTYPE html>
<html lang="en">
<head>
<title>Creative CSS3 Animation Menus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative CSS3 Animation Menus" />
<meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
    <h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions &amp; Animations</span></h1>
    <div class="content">
        <div class="more">
            <ul>
                <li class="selected"><a href="index.html">Example 1</a></li>
                <li><a href="index2.html">Example 2</a></li>
                <li><a href="index3.html">Example 3</a></li>
                <li><a href="index4.html">Example 4</a></li>
                <li><a href="index5.html">Example 5</a></li>
                <li><a href="index6.html">Example 6</a></li>
                <li><a href="index7.html">Example 7</a></li>
                <li><a href="index8.html">Example 8</a></li>
                <li><a href="index9.html">Example 9</a></li>
                <li><a href="index10.html">Example 10</a></li>
            </ul>
        </div>
        <ul class="ca-menu">
            <li> <a href="#"> <span class="ca-icon">A</span>
                <div class="ca-content">
                    <h2 class="ca-main">Exceptional Service</h2>
                    <h3 class="ca-sub">Personalized to your needs</h3>
                </div>
                </a> </li>
            <li> <a href="#"> <span class="ca-icon">I</span>
                <div class="ca-content">
                    <h2 class="ca-main">Creative Storytelling</h2>
                    <h3 class="ca-sub">Advanced use of technology</h3>
                </div>
                </a> </li>
            <li> <a href="#"> <span class="ca-icon">C</span>
                <div class="ca-content">
                    <h2 class="ca-main">Infographical Education</h2>
                    <h3 class="ca-sub">Understanding visually</h3>
                </div>
                </a> </li>
            <li> <a href="#"> <span class="ca-icon">S</span>
                <div class="ca-content">
                    <h2 class="ca-main">Sophisticated Team</h2>
                    <h3 class="ca-sub">Professionals in action</h3>
                </div>
                </a> </li>
            <li> <a href="#"> <span class="ca-icon">d</span>
                <div class="ca-content">
                    <h2 class="ca-main">Unconditional Support</h2>
                    <h3 class="ca-sub">24/7 for you needs</h3>
                </div>
                </a> </li>
        </ul>
    </div>
    <!-- content --> 
</div>
</body>
</html>

 CSS代码部分

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding: 0;
    margin: 20px auto;
    width: 500px;
}
.ca-menu li{
    width: 500px;
    height: 100px;
    overflow: hidden;
    display: block;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    border-left: 10px solid #000;
    -webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}
.ca-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    position:relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}
.ca-main{
    font-size: 30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #666;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.ca-menu li:hover{
    border-color: #fff004;
    background: #000;
}
.ca-menu li:hover .ca-icon{
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
    font-size: 50px;
}
.ca-menu li:hover .ca-main{
    color: #fff004;
    font-size: 14px;
}
.ca-menu li:hover .ca-sub{
    color: #fff;
    font-size: 30px;
}

第二个

效果图

 

html部分（全）

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Creative CSS3 Animation Menus</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Creative CSS3 Animation Menus" />
        <meta name="keywords" content="menu, navigation, animation, transition, transform, rotate, css3, web design, component, icon, slide" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container">
            
            <h1>Creative CSS3 Animation Menus <span>Experimenting with CSS3 Transitions &amp; Animations</span></h1>
            <div class="content">
                <div class="more">
                    <ul>
                        <li><a href="index.html">Example 1</a></li>
                        <li class="selected"><a href="index2.html">Example 2</a></li>
                        <li><a href="index3.html">Example 3</a></li>
                        <li><a href="index4.html">Example 4</a></li>
                        <li><a href="index5.html">Example 5</a></li>
                        <li><a href="index6.html">Example 6</a></li>
                        <li><a href="index7.html">Example 7</a></li>
                        <li><a href="index8.html">Example 8</a></li>
                        <li><a href="index9.html">Example 9</a></li>
                        <li><a href="index10.html">Example 10</a></li>
                    </ul>
                </div>
               

				<ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon">F</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Exceptional Service</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">H</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Creative Storytelling</h2>
                                <h3 class="ca-sub">Advanced use of technology</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">N</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Infographical Education</h2>
                                <h3 class="ca-sub">Understanding visually</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">K</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Sophisticated Team</h2>
                                <h3 class="ca-sub">Professionals in action</h3>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">L</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Unconditional Support</h2>
                                <h3 class="ca-sub">24/7 for you needs</h3>
                            </div>
                        </a>
                    </li>
                </ul>
            </div><!-- content -->
        </div>
    </body>
</html>

CSS部分

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('websymbols/websymbols-regular-webfont.woff') format('woff'),
        url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
        url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 500px;
}
.ca-menu li{
    width: 500px;
    height: 100px;
    overflow: hidden;
    position: relative;
    display: block;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-bottom: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:last-child{
    margin-bottom: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #333;
    position: relative;
}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    width: 90px;
    left: 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 60px;
    top: 20px;
}
.ca-main{
    font-size: 30px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-sub{
    font-size: 14px;
    color: #666;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.ca-menu li:hover{
    background: #e1f0fa;
}
.ca-menu li:hover .ca-icon{
    font-size: 40px;
    color: #259add;
    opacity: 0.8;
    text-shadow: 0px 0px 13px #fff;
}
.ca-menu li:hover .ca-main{
    opacity: 1;
    color:#2676ac;
    -webkit-animation: moveFromTop 300ms ease-in-out;
    -moz-animation: moveFromTop 300ms ease-in-out;
    -ms-animation: moveFromTop 300ms ease-in-out;
}
.ca-menu li:hover .ca-sub{
    opacity: 1;
    -webkit-animation: moveFromBottom 300ms ease-in-out;
    -moz-animation: moveFromBottom 300ms ease-in-out;
    -ms-animation: moveFromBottom 300ms ease-in-out;
}
@-webkit-keyframes moveFromBottom {
    from {
        opacity: 0;
        -webkit-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromBottom {
    from {
        opacity: 0;
        -moz-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromBottom {
    from {
        opacity: 0;
        -ms-transform: translateY(200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

@-webkit-keyframes moveFromTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@-moz-keyframes moveFromTop {
    from {
        opacity: 0;
        -moz-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -moz-transform: translateY(0%);
    }
}
@-ms-keyframes moveFromTop {
    from {
        opacity: 0;
        -ms-transform: translateY(-200%);
    }
    to {
        opacity: 1;
        -ms-transform: translateY(0%);
    }
}

第三种

效果图

最低0.47元/天 解锁文章
こ流年へ
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值