transition
举例
1.实现下拉菜单效果
<ul class="menu">
<li>
书籍
<ul class="sub-menu">
<li>js书籍</li>
<li>js书籍</li>
<li>js书籍</li>
</ul>
</li>
<li>
书籍
<ul class="sub-menu">
<li>js书籍</li>
<li>js书籍</li>
<li>js书籍</li>
</ul>
</li>
<li>
书籍
<ul class="sub-menu">
<li>js书籍</li>
<li>js书籍</li>
<li>js书籍</li>
</ul>
</li>
</ul>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.menu>li{
float: left;
border: 1px solid red;
height: 30px;
background-color: blue;
color: #fff;
line-height: 30px;
}
.menu>li:hover >.sub-menu>li{
height: 30px;
}
.sub-menu>li{
height: 0;
overflow: hidden;
background-color: red;
transition: height 0.5s;
overflow:hidden可以将超出限界的元素隐藏
鼠标悬停前:
鼠标悬停后(有过渡效果):
2.实现滚动导航效果
<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>
*{
margin: 0;
padding: 0;
}
.menu{
width: 300px;
margin: 100px auto;
}
.menu>li{
float: left;
list-style: none;
border: 1px solid red;
height: 30px;
line-height: 30px;
overflow: hidden;
}
.menu>li:hover >.show{
/* height: 60px; */
margin-top: -30px;
transition: 0.5s;
}
.show{
background-color: red;
}
.click{
background-color: yellow;
}
鼠标悬停前:
鼠标悬停后(有过渡效果):
3.实现百度菜单效果
<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>
*{
margin: 0;
padding: 0;
}
.menu{
position: fixed;
top: 50%;
right: 10%;
}
.menu>li{
list-style: none;
border: 1px solid red;
height: 30px;
line-height: 30px;
overflow: hidden;
position: relative;
}
.show{
background-color: brown;
}
.click{
background-color: chartreuse;
position: absolute;
left: 0;
top: 0;
transform: rotate(45deg);
transform-origin: -30px 30px;
transition:transform 0.5s;
}
.menu>li:hover>.click{
transform: rotate(0);
}
鼠标悬停前:
鼠标悬停后(有过渡效果):