实现原理：变化前的图标和变化后的图标在一张图片上，用这张图片作为背景，通过定义背景的位置来实现显示哪个图标，其中还带着滑动的动画效果。

<!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图标服务实现的更多相关文章

  1. 《社交红利》读书总结--如何从微信微博QQ空间等社交网络带走海量用户、流量与收入

    <社交红利--如何从微信微博QQ空间等社交网络带走海量用户.流量与收入>--徐志斌 著 <社交红利>这本书2013年9月才上市,卖的非常火. 我最初是在公司内部的期刊上,看到有 ...

  2. React Native 接入微博、微信、QQ 登录功能

    在 App 开发中我们经常需要在用户登录模块接入 SNS 登录组件,这样会大大提高用户的注册体验.特别当一个不是刚性需求 App 推广的时候,这样会很大的降低用户体验的成本,没有人愿意忍受输入邮箱.手 ...

  3. ShareSDK集成微信、QQ、微博分享

    1.前言 为什么要使用第三方的作为集成分享的工具呢?而不去用官方的呢?有什么区别么? 一个字"快",如果你使用官方的得一个个集成他们的SDK,相信这是一个痛苦的过程. 2.准备需要 ...

  4. Oauth2.0 QQ&微信&微博实现第三方登陆

    一.写在前面 目前对于大多数的App或Web网站都支持有第三方登陆这个功能,用户可使用 QQ/ 微信/ 微博 帐号快速登录你的网站,降低注册门槛,为你的网站带来海量新用户.最近在新项目上刚好用到了,在 ...

  5. 访问量分类统计（QQ,微信,微博,网页,网站APP,其他）

    刚准备敲键盘,突然想起今天已经星期五了,有点小兴奋,一周又这么愉快的结束,又可以休息了,等等..我好像是来写Java博客的,怎么变成了写日记,好吧,言归正传. 不知道大家有没有遇到过这样的需求:统计一 ...

  6. 基于Swift语言开发微信、QQ和微博的SSO授权登录代码分析

    前言 Swift 语言,怎么说呢,有一种先接受后排斥.又欢迎的感觉,纵观国外大牛开源框架或项目演示,Swift差点儿占领了多半,而国内尽管出现非常多相关技术介绍和教程,可是在真正项目开发中使用的占领非 ...

  7. 微信、qq二次分享

    前言 我们平时做微信分享的时候,一般分享出来的页面都是一个简单的html页面,不会加入框架之类的东西.所以当我们在分享出来的页面里面再次进行分享的时候,由于我们没有配置分享的标题.描述这些东西,分享出 ...

  8. 为什么我们不应该使用微信或者 QQ 作为团队协作的 IM 工具？

    如果你的团队没有觉得微信是低效的团队 IM 工具,那只有两种可能: 团队成员很少使用微信进行私人的生活和娱乐. 你就是一个低效的团队,而且还不自知. 本文内容 微信,连接一切 每个人都有微信 微信,低 ...

  9. 微信、qq网页二次分享

    二次分享是指,在APP或者浏览器分享到微信或者qq,然后从微信或者qq再分享到别的平台.如果不处理,再次分享出去的图片或者标题就不会显示,对用户非常不友好. 一.微信二次分享 官方接入文档:https ...

随机推荐

  1. MSP430主系统时钟以及430的低功耗设置

    如何将系统时钟设置到外部高频晶体振荡器,430的MCLK默认的是DCO的,如何安全的从DCO切换到外部晶体振荡器,这是一个很重要的步骤,因为经过此步骤,可以极大地提高430的处理能力,DCO在内部,可 ...

  2. <转>SpringMVC与Struts2 比较总结

    原链接:http://blog.csdn.net/chenleixing/article/details/44570681 个人整理: 1.级别不同:SpringMVC :方法  Struts是 类级 ...

  3. HGE初始化状态设置

    HGE_FRAMEFUNC:     最重要的设置,每个HGE应用必须设置.游戏的主循环就是他了.类型为bool*(),返回真那么主循环退出,游戏也就结束了.否则进行必要的处理后返回假.必须在调用进入 ...

  4. 安装sql server 出现挂起问题

    1.安装SQL Server的时候出现的情况.“以前的某个程序已在安装计算机上创建挂起的文件操作.运行安装之前必须重新启动计算机”的提示. 2.解决方法 关于SQL安装被挂起的修复大家可能都遇到过当S ...

  5. Enterprise Suse运维

    1,Suse CDH4安装 wget archive.cloudera.com/cdh4/one-click-install/redhat/6/x86_64/cloudera-cdh-4-0.x86_ ...

  6. 问题-在TreeView使用时，发现选中的树节点会闪烁或消失

    问题:在工程中选中一个树节点,鼠标焦点在树上,做某种操作时发现选中的点会消失?原因:如果只是BeginUpdate后,没有调用EndUpdate,树会全空.应该是BeginUpdate方法会刷新树,但 ...

  7. HDU 3452 Bonsai(网络流之最小割）

    题目地址:HDU 3452 最小割水题. 源点为根节点.再另设一汇点,汇点与叶子连边. 对叶子结点的推断是看度数是否为1. 代码例如以下: #include <iostream> #inc ...

  8. Codeforces Round #323 (Div. 2) C. GCD Table 暴力

    C. GCD Table Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/583/problem/C ...

  9. 基于注解的Spring MVC整合Hibernate（所需jar包，spring和Hibernate整合配置，springMVC配置，重定向，批量删除）

    1.导入jar watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdG90b3R1enVvcXVhbg==/font/5a6L5L2T/fontsize/400 ...

  10. Android手机中获取手机号码和运营商信息

    代码如下: package com.pei.activity; import android.app.Activity; import android.os.Bundle; import androi ...