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