模拟百度分享侧边栏的弹出与滑入效果。当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出。当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位置。若#div1区块未全部露出时,鼠标移出,#div1区块则开始滑入隐藏;若#div1区块未全部滑入隐藏,鼠标移入,则div1区块则开始匀速弹出。
示例图片
<!DOCTYPE html>
<html>
<head>
<title>JS运动框架案例:类百度分享制作</title>
<meta charset="UTF-8">
</head>
<style>
#div1 {
width: 150px;
height: 200px;
background: green;
position: absolute;
left: -150px;
top: calc(50% - 100px);
}
#div1 span {
width: 20px;
height: 60px;
line-height: 20px;
right: -20px;
top: 70px;
background: blue;
position: absolute;
}
html,