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;
}
CSS实现模拟百度分享侧边栏效果的更多相关文章
- JS模拟百度分享侧边栏效果
模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...
- 用于模拟百度分享的errno错误代码
0:成功;-1:由于您分享了违反相关法律法规的文件,分享功能已被禁用,之前分享出去的文件不受影响.;-2:用户不存在;请刷新页面后重试;-3:文件不存在;请刷新页面后重试;-4:登录信息有误,请重新登 ...
- 百度分享不支持https的解决方案
站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决 百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下 ...
- Splinter学习－－初探1，模拟百度搜索
Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...
- wordpress和普通网页如何使用百度分享组件
百度分享组件是什么?摘自百度百科: 百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网.分享到开心网.分享到QQ空间.分享到新浪微博等一系列SNS站点 ...
- 经典！HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- Webbrowser模拟百度一下子点击事件
Webbrowser模拟百度一下点击事件新建一个form,有一个button和一个webbrowser控件.然后webbrowser一开始加载的就是百度主页.然后在文本框里输入点东西,如何做到点击bu ...
- 纯CSS实现各类气球泡泡对话框效果
原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
- discuz的门户文章页中增加百度分享代码
discuz虽然有百度分享插件,但是不太想用,于是自己手动添加了百度分享代码: 一.在http://share.baidu.com/地址中申请设置自己的百度分享代码,选择的风格完全按照个人喜好进行选择 ...
随机推荐
- redis 开启AOF
找到redis 安装目录 例如 cd /usr/local/redis 打开 redis.conf 修改以下参数: # vi /usr/local/redis/etc/redis.conf appe ...
- leaflet中如何优雅的解决百度、高德地图的偏移问题
话不多说,先上效果图 以前在做项目时,经常会听到客户说,你们这个地图是哪来的,太丑了,能不能换成百度地图--高德也行-- 大家生活中,基本上都已经习惯了使用百度地图和高德地图,而在做项目时,用这两个地 ...
- MATLAB利用solve函数解多元一次方程组
matlab求解多元方程组示例: syms k1 k2 k3; [k1 k2 k3] = solve(-3-k3==6, 2-k1-k2+2*k3==11, 2*k1+k2-k3+1==6)或者用[k ...
- phpstorm 注解路由插件
idea-php-annotation-plugin 设置 插件 搜索 安装 重启
- 如何使用 Gin 和 Gorm 搭建一个简单的 API 服务 （二）
创建 API 我们之前已经跑过 Gin 框架的代码,现在是时候加些功能进去了. 读取全部信息 我们先从＂增删改查＂中的＂查＂入手,查询我们之前添加的信息.我接下来要删除几行代码,并把 Gin ...
- vue知识点11
1. Vue.js 是什么 Vue是一套用于构建用户界面的渐进式框架 2. vue的环境搭建(Vue2 ) 3. 经典的hello world new Vue({ ...
- Markdown--补充版
markdown语法实例 markdown语法实例 强调 分割线 引用 标题Setext方式 大标题 小标题 标题Atx方式 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 无序列表 有序 ...
- windows注册redis为服务,zookeeper为服务
windows注册redis为服务,zkserver为服务 1.redis部分 通过redis内置工具安装 进入redis安装目录 1.shift+鼠标右键打开菜单,点击"在此处打开命令窗口 ...
- Unity实现代码控制音频播放
前言 很久没说过Unity了,现在说一下Unity用代码控制音频播放 准备工作 1.需要播放的音频 2.给需要加声音的对象加Audio Source组件 3.新建Play脚本,并绑定需要播放声音的对象 ...
- 如何使用性能分析工具定位SQL执行慢的原因？
但实际上 SQL 执行起来可能还是很慢,那么到底从哪里定位 SQL 查询慢的问题呢?是索引设计的问题?服务器参数配置的问题?还是需要增加缓存的问题呢?性能分析来入手分析,定位导致 SQL 执行慢的原因 ...