微信、微博、qq图标服务实现

微信、微博、qq图标服务实现

微信、微博、qq图标服务实现

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

微信、微博、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>
上一篇:java 读取excel poi 和cell 方法


下一篇:Android开发艺术探索笔记——View(二)