**前言:**因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition。
先来看一下我的代码:
详情
内容1
内容1
内容1
内容1
内容1
.detail {
position: fixed;
right: -100px;
transition: right 1s;
}
.detail:hover {
right: 0;
}
.div1 {
background-color: green;
border-top-left-radius: 10%;
border-bottom-left-radius: 10%;
width: 50px;
height: 30px;
float: left;
}
.div2 {
background-color: green;
width: 100px;
height: 100px;
float: left;
}
我先把整个div都移到屏幕外面,只留下详情显示出来,当鼠标悬浮到详情上的时候,把righ变成0ÿ