微信、微博、qq图标服务实现
实现原理:变化前的图标和变化后的图标在一张图片上,用这张图片作为背景,通过定义背景的位置来实现显示哪个图标,其中还带着滑动的动画效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wh{width: 17px;height: 13px;float:left;margin-right:5px;}
.icon1{background: url(img/logo-sprite.png) no-repeat -1px -1px;transition: background 1s; }
.icon2{background: url(img/logo-sprite.png) no-repeat -29px -1px;transition: background 1s;}
.icon3{background: url(img/logo-sprite.png) no-repeat -59px -1px;transition: background 1s;}
.icon1:hover{background: url(img/logo-sprite.png) no-repeat -1px -18px;}
.icon2:hover{background: url(img/logo-sprite.png) no-repeat -29px -18px;}
.icon3:hover{background: url(img/logo-sprite.png) no-repeat -59px -18px;}
</style>
</head>
<body>
<div class="contact">
<div class="icon1 wh"></div>
<div class="icon2 wh"></div>
<div class="icon3 wh"></div>
</div>
</body>
</html>
微信、微博、qq图标服务实现的更多相关文章
- 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入
<社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...
- React Native 接入微博、微信、QQ 登录功能
在 App 开发中我们经常需要在用户登录模块接入 SNS 登录组件,这样会大大提高用户的注册体验.特别当一个不是刚性需求 App 推广的时候,这样会很大的降低用户体验的成本,没有人愿意忍受输入邮箱.手 ...
- ShareSDK集成微信、QQ、微博分享
1.前言 为什么要使用第三方的作为集成分享的工具呢?而不去用官方的呢?有什么区别么? 一个字"快",如果你使用官方的得一个个集成他们的SDK,相信这是一个痛苦的过程. 2.准备需要 ...
- Oauth2.0 QQ&微信&微博实现第三方登陆
一.写在前面 目前对于大多数的App或Web网站都支持有第三方登陆这个功能,用户可使用 QQ/ 微信/ 微博 帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户.最近在新项目上刚好用到了,在 ...
- 访问量分类统计(QQ,微信,微博,网页,网站APP,其他)
刚准备敲键盘,突然想起今天已经星期五了,有点小兴奋,一周又这么愉快的结束,又可以休息了,等等..我好像是来写Java博客的,怎么变成了写日记,好吧,言归正传. 不知道大家有没有遇到过这样的需求:统计一 ...
- 基于Swift语言开发微信、QQ和微博的SSO授权登录代码分析
前言 Swift 语言,怎么说呢,有一种先接受后排斥.又欢迎的感觉,纵观国外大牛开源框架或项目演示,Swift差点儿占领了多半,而国内尽管出现非常多相关技术介绍和教程,可是在真正项目开发中使用的占领非 ...
- 微信、qq二次分享
前言 我们平时做微信分享的时候,一般分享出来的页面都是一个简单的html页面,不会加入框架之类的东西.所以当我们在分享出来的页面里面再次进行分享的时候,由于我们没有配置分享的标题.描述这些东西,分享出 ...
- 为什么我们不应该使用微信或者 QQ 作为团队协作的 IM 工具?
如果你的团队没有觉得微信是低效的团队 IM 工具,那只有两种可能: 团队成员很少使用微信进行私人的生活和娱乐. 你就是一个低效的团队,而且还不自知. 本文内容 微信,连接一切 每个人都有微信 微信,低 ...
- 微信、qq网页二次分享
二次分享是指,在APP或者浏览器分享到微信或者qq,然后从微信或者qq再分享到别的平台.如果不处理,再次分享出去的图片或者标题就不会显示,对用户非常不友好. 一.微信二次分享 官方接入文档:https ...
随机推荐
- JRebel 5.3.2
http://www.blogjava.net/xylz/archive/2013/09/15/404098.html 此为单文件版本,无需license文件 IDE(Eclipse.IDEA可能 ...
- xmbc 资源
http://raspberrypi.diandian.com/post/2013-02-25/40048470423 http://blog.csdn.net/lincyang/article/de ...
- Notepad++中调用cl.exe编译器(Windows)
Notepad++中调用cl.exe编译器(Windows) 近来在notepad++中写代码,写完后总是习惯性的想去VS里面编译一下,看看代码是否有误.但有时候一些零碎的小文件总是懒得再VS中打开, ...
- Tomcat问题笔记
1. Tomcat服务器只能同步WebContent目录到webapps下面,如果WebContent里面的.html文件引用了与WebContent文件夹同级目录下的一个.js文件,Tomcat服务 ...
- 在PHPmyadmin中删除数据库
删除数据库用sql语句 的方法: 删除数据库DROP DATABASE `数据库名称`; 删除数据库里的表DROP TABLE `数据库里的表名`;
- Android编译过程详解(一)
Android编译过程详解(一) 注:本文转载自Android编译过程详解(一):http://www.cnblogs.com/mr-raptor/archive/2012/06/07/2540359 ...
- DELPHI 数学函数+字符处理函数
System单元 Trunc(1234.5678);{1234} Trunc(-1234.5678);{-1234} Round(1234.5678);{1235} Round(-1234.5678) ...
- 谷歌下设置滚动条的css样式
.oLi-lists-scroll::-webkit-scrollbar { width:5px; padding:1px; background:url(../images/repeat-bar. ...
- ng-cookie 的基本使用
2.angular-cookie - 配置$cookiesProvider ```angular.module("Demo",[]).config(["$cookiesP ...
- iOS 分类和继承
iOS 中分类(Categories) 和 继承(Inherit)有相同的功能,但在一些细节上又有差异,简单介绍一下两者的异同. 分类可以在不知道系统类源代码的情况下,为这个类添加新的方法.分类只能用 ...