在《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. Fabric1.4.4 基础环境搭建

    简单记录一下fabric版本1.4.4的环境搭建部署,运行环境为CentOs7.8,如有错误欢迎批评指正. 1.Docker 和 Docker Compose 1. docker的安装部署 docke ...

  2. 通过MapReduce降低服务响应时间

    在微服务中开发中,api网关扮演对外提供restful api的角色,而api的数据往往会依赖其他服务,复杂的api更是会依赖多个甚至数十个服务.虽然单个被依赖服务的耗时一般都比较低,但如果多个服务串 ...

  3. 佛山6397.7539(薇)xiaojie:佛山哪里有xiaomei

    佛山哪里有小姐服务大保健[微信:6397.7539倩儿小妹[佛山叫小姐服务√o服务微信:6397.7539倩儿小妹[佛山叫小姐服务][十微信:6397.7539倩儿小妹][佛山叫小姐包夜服务][十微信 ...

  4. 关于pipeline的一篇转载博文https://www.cnblogs.com/midhillzhou/p/5588958.html

    引用自https://www.cnblogs.com/midhillzhou/p/5588958.html 1.pipeline的产生 从一个现象说起,有一家咖啡吧生意特别好,每天来的客人络绎不绝,客 ...

  5. 【xenomai内核解析】系列文章大纲

    xenomai内核解析 本博客为本人学习linux实时操作系统框架xenomai的一些记录,主要剖析xenomai内核实现,以及与linux相关的知识.方便读者定位具体文章,现列出本博客大纲,后续会陆 ...

  6. 如何制作一个vagrant box

        因为要用的窗口应用,基于服务器的各种box不能使用(曾经尝试安装桌面,没有成功).所以试着基于Ubuntu的虚拟机创建自己的box. 过程中主要参考了这篇文章:http://www.360do ...

  7. spring boot:用rocketmq消息订阅实现删除购物车商品功能(spring boot 2.3.3)

    一,为什么要使用消息队列实现删除购物车商品功能? 消息队列主要用来处理不需要立刻返回结果的业务, 常见的例子: 用户在下单后,要清除原购物车中的商品, 这个处理过程不需要马上实现也不需要返回结果给用户 ...

  8. linux(centos8):阿里云ecs配置smtps发邮件(解决不能通过25端口发邮件问题)

    一,2016年9月后购买的阿里云ecs不再支持通过25端口发送邮件 官方的建议是使用465端口 465端口(SMTPS): 465端口是为SMTPS(SMTP-over-SSL)协议服务开放的 它是S ...

  9. centos8平台用NetworkManager/nmcli管理网络

    一,centos8上,网络服务的管理需要NetworkManager服务 1,NetworkManager的服务操作 启动 [root@localhost network-scripts]# syst ...

  10. Linux系统安装MySQL（2020最新最详细）

    2020最新Linux系统发行版ContOS7演示安装MySQL. 为防止操作权限不足,建议切换root用户,当然如果你对Linux命令熟悉,能够自主完成权限更新操作,可以不考虑此推荐. 更多命令学习 ...