上升菜单栏🔝
以前自己的做法是用定位来做的，但是做的很不舒服，现在使用css3的办法很棒
- 使用技术:hover、transition
- 原理:两层快级级结构，鼠标移入,上面的块级结构往上移动
- 实现效果(由于放不上视频，只能截图了)
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 从下往上滚动菜单 -->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.menu>li{
float: left;
width: 50px;
height: 30px;
background-color: #0000FF;
overflow: hidden;
margin-top: 100px;
}
.menu>li>p{
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
overflow: hidden;
}
.show{
background-color: #00A4FF;
transition: margin-top 1s;
}
.click{
background-color: yellow;
}
.menu>li:hover > .show{
margin-top: -30px;
}
</style>
</head>
<body>
<!-- 从下往上滚动菜单 -->
<ul class="menu">
<li>
<p class="show">首页</p>
<p class="click">首页</p>
</li>
<li>
<p class="show">视频</p>
<p class="click">视频</p>
</li>
<li>
<p class="show">音乐</p>
<p class="click">音乐</p>
</li>
</ul>
</body>
</html>
1665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
