CSS实现模拟百度分享侧边栏效果

在《JS模拟百度分享侧边栏效果》一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示，鼠标移出滑入隐藏的效果。其实在CSS3中通过transition属性就可以较为轻松实现。

 

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
		html,
		body {
			margin: 0;
			padding: 0;
		}

		#div1 {
			width: 150px;
			height: 200px;
			background: green;
			position: absolute;
			left: -150px;
			top: calc(50% - 100px);
			transition:left 0.5s linear ;
		}

		#div1 span {
			width: 20px;
			height: 60px;
			line-height: 20px;
			right: -20px;
			top: 70px;
			background: blue;
			position: absolute;

		}
/*  补充代码*/

	</style>
</head>

<body>
	<div id='div1'>
		<span>分享到</span>
	</div>

</body>

</html>

　　

参考代码：

		html,
		body {
			margin: 0;
			padding: 0;
		}

		#div1 {
			width: 150px;
			height: 200px;
			background: green;
			position: absolute;
			left: -150px;
			top: calc(50% - 100px);
			/*补充代码 */
			transition: left 0.5s linear;
		}

		#div1 span {
			width: 20px;
			height: 60px;
			line-height: 20px;
			right: -20px;
			top: 70px;
			background: blue;
			position: absolute;

		}

		/* 补充代码 */
		#div1:hover {
			left: 0;
			transition: left 0.5s linear;
		}

　　

　　

 

posted @ 2019-07-31 12:51  请叫我二狗哥  阅读(421)  评论(0)    收藏  举报