这篇博将分享几种纯 css 写的网页导航效果，但在正文开始之前，想跪谢腾讯开发【QQ for Mac 5.3.0或更高版本】自带的 ?? 录屏功能 ?? 向大佬低头 ????
command + control + R 快捷录屏，保存为 gif 格式。酱紫一来就能更完美的展现页面效果噜～ ( ?? .? ?? )?
以下所有效果源码都可以到 这里 下载
1.导航 二级菜单翻转效果
结构创建
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<header> <nav> <ul> <li><img src="img/G222291335.png" alt="logo"/></li> <li><a href="#">首页</a></li> <li><a href="#">动态</a></li> <li class="other_choice"> <a href="#">其他</a> <ol class="second_menu"> <li><a href="#">其他</a></li> <li><a href="#">其他</a></li> <li><a href="#">其他</a></li> </ol> </li> </ul> </nav> </header> |
样式部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
header{
height: 44px;
background: linear-gradient(#838DA7,#576070);
}
header ul>li{
float: left;
}
header ul li a {
line-height: 44px;
}
header li{
padding: 0 25px;
}
header ul>li:first-child{
margin-left: 220px;
padding: 0;
box-shadow: 0 0 5px 5px rgba(255,255,255,.2);
}
header li:hover a,.second_menu li>a{
color:#fff;
}
.other_choice{
position: relative;
}
.second_menu{
width: 100%;
position: absolute;
left: 0;
visibility: hidden;
}
.second_menu li{
width: 100%;
text-align: center;
box-sizing: border-box;
background-color: #8E816F;
border-bottom: 1px solid #D6D6D8;
transform: rotateY(180deg);
transition: all linear 400ms;
}
.other_choice:hover .second_menu{
visibility: visible;
}
.other_choice:hover .second_menu>li{
transform: skew(180deg);
}
.second_menu>li:nth-child(3){
transition-delay:0ms;
}
.second_menu>li:nth-child(2){
transition-delay:300ms;
}
.second_menu>li:nth-child(1){
transition-delay:600ms;
}
/*一级菜单最后一项 移入后 二级菜单选项*/
.other_choice:hover .second_menu li:first-child{
transition-delay: 0s;
}
.other_choice:hover .second_menu li:nth-child(2){
transition-delay: 300ms;
}
.other_choice:hover .second_menu li:nth-child(3){
transition-delay: 600ms;
}
|
实现这个效果的关键点在于第37行及以后的代码，将二级菜单通过 transform rotate Y轴翻转，再移入翻转回正面。配合延时，是不是棒棒哒 ?( ? )?
2.导航 延展线效果
结构创建
1 2 3 4 5 6 7 8 9 |
<header> <nav> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </nav> </header> |
样式部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
header ul{
overflow: hidden;
padding-bottom: 3px;
background: linear-gradient(#838DA7,#576070);
}
header li{
padding-bottom: 5px;
float: left;
margin-left: 100px;
position: relative;
}
header li a{
font-size: 30px;
}
header li:hover a{
color: #fff;
}
header li:before{
content:"";
width: 0;
border-bottom: 5px solid rgba(255,255,255,.2);
position: absolute;
left: 50%;
bottom: 0;
transition: all linear .5s;
}
header li:hover:before{
width: 100%;
left: 0;
}
|
实现这个效果的关键点在于利用伪元素从0到100%的宽度以及位置的变化做出效果
3.导航 延展线效果2
结构创建
1 2 3 4 |
<ul class="nav3"> <li><a href="#">first</a></li> <li><a href="#">second</a></li> </ul> |
样式部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 大专栏 你能用CSS为导航添加的效果line">26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.nav3{
width: 300px;
margin: auto;
}
.nav3 li{
float: left;
width: 120px;
height: 40px;
transform: skew(-20deg);
background: linear-gradient(#838DA7,#576070);
margin-left: 20px;
}
.nav3 li a{
color: #fff;
display: block;
line-height: 40px;
text-align: center;
transform: skew(20deg);
}
.nav3 li:first-child:before{
content: "";
width:0;
height: 0;
border-top: 4px solid #576070;
position: absolute;
bottom: 0;
left: -160px;
}
.nav3 li:first-child:hover:before{
width: 80%;
left: 0;
transition: all linear 300ms;
}
.nav3 li:last-child:before{
content: "";
width: 0;
height: 0;
border-top: 4px solid #838DA7;
position: absolute;
top: 0;
left: 279px;
}
.nav3 li:last-child:hover:before{
width: 80%;
left:10%;
transition: all linear 300ms;
}
|
对此我并不想说啥 ?( ? )?
4.导航 震动效果
结构创建
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<div class="movie_show"> <ul> <li> <a href="#"><img src="img/movie_pic15.png" alt="银河护卫队2"/></a> <h2>《银河护卫队2》</h2> <time>2017.5.5</time> </li> <li> <time>2008.8.20</time> <h2>《无敌浩克》</h2> <a href="#"><img src="img/movie_pic02.png" alt="浩克"/></a> </li> <li> <a href="#"><img src="img/movie_pic03.png" alt="钢铁侠2"/></a> <h2>《钢铁侠2》</h2> <time>2010.4.25</time> </li> <li> <time>2011.5.2</time> <h2>《奇异博士》</h2> <a href="#"><img src="img/movie_pic14.png" alt="奇异博士"/></a> </li> <li> <a href="#"><img src="img/movie_pic05.png" alt="美队"/></a> <h2>《美国队长》</h2> <time>2011.7.19</time> </li> <li> <time>2018.11.2</time> <h2>《惊奇队长》</h2> <a href="#"><img src="img/movie_pic19.png" alt="惊奇队长"/></a> </li> </ul> </div> |
样式部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
.movie_show{
width: 100%;
height: 500px;
background: url("img/movie_bj.jpg") center;
}
.movie_show ul{
width: 1020px;
height: 450px;
overflow: hidden;
margin: auto;
text-align: center;
display: flex;
}
.movie_show ul li{
height: 244px;
cursor: pointer;
flex-grow: 1;
font-size: 0;
color: #ffffff;
text-align: center;
}
.movie_show li:hover{
color: #f32c1e;
}
.movie_show ul li:nth-child(even){
align-self:flex-end;
}
.movie_show li>h2,.movie_show li>time {
font-size: 18px;
}
.movie_show li time{
width: 118px;
height: 40px;
line-height: 40px;
text-align: center;
display: block;
}
.movie_show li:hover time{
background:url("img/icon.png") 0 -312px;
}
.movie_show ul li:nth-child(odd) time{
margin: 32px auto 0;
}
.movie_show ul li:nth-child(even) time{
margin: 0 auto 26px;
}
.movie_show li:hover time{
background:url("img/icon.png") 0 -312px;
}
.movie_show li a{
display: block;
}
.movie_show li:nth-child(1)>a{
background:url("img/movie_pic15.png") no-repeat center;
}
.movie_show li:nth-child(2)>a{
background:url("img/movie_pic02.png") no-repeat center;
}
.movie_show li:nth-child(3)>a{
background:url("img/movie_pic03.png") no-repeat center;
}
.movie_show li:nth-child(4)>a{
background:url("img/movie_pic14.png") no-repeat center;
}
.movie_show li:nth-child(5)>a{
background:url("img/movie_pic05.png") no-repeat center;
}
.movie_show li:nth-child(6)>a{
background:url("img/movie_pic19.png") no-repeat center;
}
.movie_show li:hover img{
opacity: 0;
transform: scale(1.5);
transition: all 1s linear;
}
|
这个效果的关键点在于将同一个图片作为 img 和 bg-img 重叠，在移入后将 img 通过 transform 放大 Σ( ???) 居然还有这种操作
至于这样 “W” 形的排版，opsition 可以做，但在这个例子中我使用了弹性盒模型 flex 也是棒棒哒 (????????)??????
原文地址：https://www.cnblogs.com/sanxiandoupi/p/11693104.html
时间： 2024-10-03 08:12:00