微信、微博、qq圖標服務實現

時間 2019-11-18

標籤微信微博圖標服務實現欄目騰訊简体版

原文原文鏈接

實現原理：變化前的圖標和變化後的圖標在一張圖片上，用這張圖片做爲背景，經過定義背景的位置來實現顯示哪一個圖標，其中還帶着滑動的動畫效果。css

<!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>

相關標籤/搜索