html5 侧面板展开折叠,css实现侧边展开收起

前言：因为突然想研究研究侧边栏滑动展开收起怎么做的，就去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，就