Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0
}
body {
	height:3000px;
}
.rgnotice {
	position:fixed;
	top:28%;
	right:0;
	background-color:#C2C2C2;
	-webkit-box-shadow:-5px 5px 8px #EBEBEB;
	-moz-box-shadow:-5px 5px 8px #EBEBEB;
	-o-box-shadow:-5px 5px 8px #EBEBEB;
	-ms-box-shadow:-5px 5px 8px #EBEBEB;
	box-shadow:-5px 5px 8px #EBEBEB;
}
.rgnotice ul {
	list-style:none;
	width:55px;
}
.rgnotice ul li {
	height:50px;
	text-align:center;
	cursor:pointer;
}
.rgnotice ul li:hover {
	background-color:#DBDBDB
}
.rgnotice hr {
	border:0.5px solid #E0FFFF;
}
.rgnotice .content {
	width:150px;
	height:206px;
	background-color:#DBDBDB;
	position:absolute;
	top:0;
	right:56px;
	display:none;
}
.rgnotice ul li:hover + .content {
	display:block;
	-webkit-box-shadow:-5px 5px 8px #EBEBEB;
	-moz-box-shadow:-5px 5px 8px #EBEBEB;
	-o-box-shadow:-5px 5px 8px #EBEBEB;
	-ms-box-shadow:-5px 5px 8px #EBEBEB;
	box-shadow:-5px 5px 8px #EBEBEB;
}
.fadeinx {
	-webkit-animation:flipInX 1s .2s ease both;
	-moz-animation:flipInX 1s .2s ease both
}
@-webkit-keyframes flipInX {
	0% {
	-webkit-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
40% {
	-webkit-transform:perspective(400px) rotateX(-10deg)
}
70% {
	-webkit-transform:perspective(400px) rotateX(10deg)
}
100% {
	-webkit-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}@-moz-keyframes flipInX {
	0% {
	-moz-transform:perspective(400px) rotateX(90deg);
	opacity:0
}
40% {
	-moz-transform:perspective(400px) rotateX(-10deg)
}
70% {
	-moz-transform:perspective(400px) rotateX(10deg)
}
100% {
	-moz-transform:perspective(400px) rotateX(0deg);
	opacity:1
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

左侧工具栏CSS实现

简单实用 易扩展

1
      杰丿victory1
      2018/5/25 8:32:44
      这个有一个瑕疵,应该还要加一条css
      .rgnotice .content:hover{display:block;-webkit-box-shadow:-5px 5px 8px #ebebeb;-moz-box-shadow:-5px 5px 8px #ebebeb;-o-box-shadow:-5px 5px 8px #ebebeb;-ms-box-shadow:-5px 5px 8px #ebebeb;box-shadow:-5px 5px 8px #ebebeb;}

      不然鼠标移动到内容区,内容区就消失了
      回复