Html5 + Css3 制作QQ悬浮特效

1 QQ二维码图标右侧悬浮，可开可收

2 点击QQ在线咨询，可以弹出对方qq对话框

3 代码如下

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>QQ悬浮特效</title><style type="text/css">*{margin:0px;padding:0px;}#qq{width:200px;height:250px;position:fixed;top:100px;right:10px;}#qq #showQQ{width:158px;height:230px;right:10px;position:absolute;}#qq #showQQ .con{width:158px;height:162px;background:url("images/bg.jpg");padding-top:10px;}#qq #showQQ .con img.ewm{margin:0px auto 0;}#qq #showQQ img.txt{display:block;//去掉图片间的空行}#qq #showQQ .con p{width:120px;height:35px;font-size:14px;font-family:"微软雅黑";color:#ffffff;margin:10px auto 0px;margin-left:20px;line-height:35px;border-bottom:1px solid #df5685;letter-spacing:1px;}#qq #showQQ .con p a{text-decoration:none;color:#ffffff;}#qq img.close{position:absolute;top:0px;right:-50px;}</style></head><body><div id="qq"><div id="showQQ"><img src="data:images/top.jpg" class="txt" /><div class="con" ><img width="105" height="105" class="txt ewm" src="data:images/ewm.jpg" /><p><a href="http://wpa.qq.com/msgrd?v=3&uin=1530144568&site=qq&menu=yes" target="_blank"><img src="data:images/qq.jpg" align="absmiddle"/> 在线QQ咨询</a></p></div><img src="data:images/bot.jpg" class="txt" /></div><img src="data:images/small.jpg" class="close" /></div><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$("img.txt").click(function(){$("#showQQ").animate({right:"-170px"},300,function(){$("img.close").animate({right:"0px"},500);});});$("img.close").click(function(){$("img.close").animate({right:"-50px"},300,function(){$("#showQQ").animate({right:"0px"},500);});});</script></body></html>

4 效果图

开发视频教程百度网盘下载
jquery //download.csdn.net/download/taoerit/12366317

html //download.csdn.net/download/taoerit/12366310

css //download.csdn.net/download/taoerit/12366310

we api //download.csdn.net/download/taoerit/12366344

php //download.csdn.net/download/taoerit/12366338

Html5 + Css3 制作QQ悬浮特效相关推荐

html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT编程
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的音频loading加载动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTY ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCT ...
【web前端特效源码】使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的电脑桌面+昼夜变化动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
9款超绚丽的HTML5/CSS3应用和动画特效
HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验.今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单.按钮.图片 ...
html人物动画效果图,9款用HTML5/CSS3制作的动物、人物动画
原标题:9款用HTML5/CSS3制作的动物.人物动画今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. ...
9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...
分享9款用HTML5/CSS3制作的动物、人物动画
今天我们要来分享一些设计非常独特的人物和动物动画效果,它们都是通过HTML5和CSS3制作而成,有一些动画是利用纯CSS3实现的,一起来看看. 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分 ...