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/地址中申请设置自己的百度分享代码,选择的风格完全按照个人喜好进行选择 ...
随机推荐
- 实验四 CSS样式的应用
实验四 CSS样式的应用 注意:以下实验项目皆以本文件为操作对象,实验结果用记事本保留后预览,最后将添加的CSS代码转载到实验报告中 另本网页中蓝色加下划线的字即为默认的超链接样式 实验目的: 掌握 ...
- 多测师讲解python _函数中参数__高级讲师肖sir
函数中讲解参数: 形参和实参的认识 函数无参数的调用 函数单个参数的调用 函数多个参数的调用 # #调试函数给默认参数传新值,则函数使用新值 # 注意:当多种参数同时出现在函数中,默认参数要放在最后的 ...
- Mac zsh中所有命令失效
参考文章 https://blog.csdn.net/hujincai_55/article/details/95680245?utm_medium=distribute.pc_relevant.no ...
- python写文件时遇到UnicodeEncodeError: 'gbk' codec can't encode character的解决方式
在window平台,文件的默认编码是gbk, 此时如果写入的字符串的编码是utf-8就会引发这种错误,打开文件的编码必须与字符串的编码一致 with open('content.txt','w',en ...
- Python 面向对象(1): 类方法基础
# 类方法 # 如果 该class 没有要继承的类 则一般需要继承 object 基类 class ClassMethodBase(object): # 起手初始化 以示尊敬 def __init__ ...
- openresty使用redis作本地缓存
一,为什么要使用redis作本地缓存? 1,使用缓存通常会有三层 当使用openresty作为web服务器时,我们更看重是的它可以通过lua编程的扩展能力,就openresty而言,它可以实现的功能非 ...
- Vue企业级优雅实战05-框架开发01-登录界面
预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy-admin-single.git # github git clone git ...
- C# indexof和indexofany区别(转)
定位子串是指在一个字符串中寻找其中包含的子串或者某个字符.在String类中,常用的定位子串和字符的方法包括IndexOf/LastIndexOf及IndexOfAny/LastIndexOfAny, ...
- JS图片的放大与缩小
<!doctype html><head><meta charset=utf-8" /><title>javascript控制图片缩小或者放大 ...
- 主流开源分布式图数据库 Benchmark
本文由美团 NLP 团队高辰.赵登昌撰写 首发于 Nebula Graph 官方论坛:https://discuss.nebula-graph.com.cn/t/topic/1377 1. 前言 近年 ...