zoukankan      html  css  js  c++  java
  • 悬浮框的制作

    css代码:

    <style>
    * {
    margin: 0;
    padding: 0;
    border: none;
    zoom: 1;
    }
    ul li {
    list-style: none;
    }
    .box {
    52px;
    height: 162px;
    border: 1px solid #ccc;
    margin-left: 30%;
    margin-top: 10%;
    position: relative
    }
    .box ul li {
    48px;
    display: block;
    height: 50px;
    padding: 2px;
    overflow: hidden
    }
    .weixin {
    background: url(elevator.png) no-repeat;
    background-position: 0 87%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    }
    .weixin:hover {
    background-position: 0 93%
    }
    .weixin:hover .weixin-logo {
    170px;
    height: 204px;
    }
    .idea {
    background: url(elevator.png) no-repeat;
    background-position: 0 43%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    }
    .idea:hover {
    background-position: 0 49%;
    }
    .app {
    background: url(elevator.png) no-repeat;
    background-position: 0 55%;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    }
    .app:hover {
    background-position: 0 61%;
    }
    .app:hover .app-logo {
    170px;
    height: 185px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    }
    .weixin-logo {
    background: url(elevator.png) no-repeat;
    background-position: 0 0;
    0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: -154px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    }
    .app-logo {
    background: url(elevator.png) no-repeat;
    background-position: 0 26%;
    0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: -18px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    }
    </style>

    html代码:

    <body>
    <div class="box">
    <ul>
    <li class="weixin">
    <div class="weixin-logo"></div>
    </li>
    <li class="idea"></li>
    <li class="app">
    <div class="app-logo"></div>
    </li>
    </ul>
    </div>
    </body>

  • 相关阅读:
    自动化测试如何解析excel文件?
    Unittest加载执行用例的方法总结
    pytest进阶之配置文件
    [编程题] 把二叉树打印成多行
    [编程题]求1+2+3+....n
    [编程题]-[位运算技巧系列]不用加减乘除做加法
    [编程题]数值的整数次方
    [编程题]构建乘积数组
    [编程题]变态跳台阶
    [编程题][剑指 Offer 10- II. 青蛙跳台阶问题]
  • 原文地址:https://www.cnblogs.com/tuhailin/p/5627285.html
Copyright © 2011-2022 走看看