Html5 + Css3 制作QQ悬浮特效

使用Html5和Css3创建QQ悬浮咨询特效

最新推荐文章于 2022-02-03 19:30:00 发布

程序猿的杂货店

最新推荐文章于 2022-02-03 19:30:00 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： C# 开发总结文章标签： QQ咨询悬浮特效

本文链接：https://blog.youkuaiyun.com/taoerit/article/details/50354642

C# 开发总结专栏收录该内容

142 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何利用Html5和Css3技术实现QQ二维码图标在页面右侧悬浮，并且可以展开和收起。点击QQ在线咨询按钮，能够弹出与对方的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-t