zoukankan      html  css  js  c++  java
  • 微信、微博、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面试准备之基础排序——冒泡与选择排序
    PL/SQL 存储过程
    浅析Java中CountDownLatch用法
    tmux分屏幕
    two's complement
    angularJs中$controller的使用
    nodejs pipe实现大文件拷贝
    不错的网站
    echarts文档对照
    nodejs 项目的session验证
  • 原文地址:https://www.cnblogs.com/liuyanxia/p/5265925.html
Copyright © 2011-2022 走看看