在《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实现模拟百度分享侧边栏效果的更多相关文章

  1. JS模拟百度分享侧边栏效果

    模拟百度分享侧边栏的弹出与滑入效果.当鼠标移入#div1分享侧边栏,#div1分享侧边栏区块匀速滑出直至其全部露出.当鼠标移除#div1分享侧边栏,#div1分享侧边栏区块匀速滑入隐藏,直至恢复初始位 ...

  2. 用于模拟百度分享的errno错误代码

    0:成功;-1:由于您分享了违反相关法律法规的文件,分享功能已被禁用,之前分享出去的文件不受影响.;-2:用户不存在;请刷新页面后重试;-3:文件不存在;请刷新页面后重试;-4:登录信息有误,请重新登 ...

  3. 百度分享不支持https的解决方案

    站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决 百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下 ...

  4. Splinter学习－－初探1，模拟百度搜索

    Splinter是以Selenium, PhantomJS 和 zope.testbrowser为基础构建的web自动化测试工具,基本原理同selenium 支持的浏览器包括:Chrome, Fire ...

  5. wordpress和普通网页如何使用百度分享组件

    百度分享组件是什么?摘自百度百科: 百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网.分享到开心网.分享到QQ空间.分享到新浪微博等一系列SNS站点 ...

  6. 经典！HTML5 Canvas 模拟可撕裂布料效果

    这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...

  7. Webbrowser模拟百度一下子点击事件

    Webbrowser模拟百度一下点击事件新建一个form,有一个button和一个webbrowser控件.然后webbrowser一开始加载的就是百度主页.然后在文本框里输入点东西,如何做到点击bu ...

  8. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  9. discuz的门户文章页中增加百度分享代码

    discuz虽然有百度分享插件,但是不太想用,于是自己手动添加了百度分享代码: 一.在http://share.baidu.com/地址中申请设置自己的百度分享代码,选择的风格完全按照个人喜好进行选择 ...

随机推荐

  1. mycat ER分片

    有一类业务,例如订单(ORDER)跟订单明细表(ORDER_DETAIL),明细表会依赖于订单,就是该会存在表的主从关系,这类似业务的切分可以抽象出合适的切分规则,比如根据用户ID切分,其它相关的表都 ...

  2. 飞翔---------双重线性dp

    题目: 鹰最骄傲的就是翱翔,但是鹰们互相都很嫉妒别的鹰比自己飞的快,更嫉妒其他的鹰比自己飞行的有技巧.于是,他们决定举办一场比赛,比赛的地方将在一个迷宫之中. 这些鹰的起始点被设在一个N*M矩阵的左下 ...

  3. Jira 8.5.1 安装教程

    Jira安装教程 一.CentOS设置 1. 更换阿里源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/rep ...

  4. 第三十六章 Linux常用性能检测的指令

    作为一个Linux运维人员,介绍下常用的性能检测指令! 一.uptime 命令返回的信息: 19:08:17              //系统当前时间 up 127 days,  3:00     ...

  5. Flink + 强化学习 搭建实时推荐系统

    如今的推荐系统,对于实时性的要求越来越高,实时推荐的流程大致可以概括为这样: 推荐系统对于用户的请求产生推荐,用户对推荐结果作出反馈 (购买/点击/离开等等),推荐系统再根据用户反馈作出新的推荐.这个 ...

  6. ServletResponse使用介绍

    ServletResponse为将响应发送到客户端的对象:Servlet 容器创建 ServletResponse 对象,并将它作为参数传递给Servlet的service 方法,如下图 : Http ...

  7. 10 个 Python 初学者必知编码小技巧

    技巧 #1 字符串翻转 a = "codementor">>> print "Reverse is",a[::-1]翻转后的结果为 rotne ...

  8. JVM内存管理和垃圾回收

    无论对于Java程序员还是大数据研发人员,JVM是必须掌握的技能之一.既是面试中经常问的问题,也是在实际业务中对程序进行调优.排查类似于内存溢出.栈溢出.内存泄漏等问题的关键.笔者将按下图分多篇文章详 ...

  9. sqlServer数据库中的日期转换

    今天开发过程中涉及到 sqlServer数据库数据同步至mysql数据,所以对日期格式转换需求,查到了一些关于sqlServer 的日期转换内容: 一般存入数据库中的时间格式为yyyy-mm-ddhh ...

  10. vue-cli2.0创建项目步骤

    Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs三国鼎立,我不是职业前端,做过Vue,了解了一下React,听说过Angluar.我只能这么说,我来晚了,没经 ...