• 一张图片分为2部分显示带有鼠标变换效果



     一张图片分为2部分显示带有变换效果
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    .d1 {
     background-image: url(images/redhat.png);
    }
    .d2 {
     background-image: url(images/redhat2.png);
    }
    .d3 {
     background-image: url(images/redhat3.png);
    }
    .d4 {
     background-image: url(images/redhat4.png);
    }
    .ad {
      220px;
     margin-left: 10px;
     height: 100px;
     border: 1px solid gray;
     opacity: 0.5;   /*透明效果,1为不透明*/
     -webkit-transition: all 0.2s ease-in 0;
     float: left;
    }
    .ad:hover {
     opacity: 1;
     background-position: right center;
    }
    </style>
    </head>
    <body>
    <div class="ad d1"></div>
    <div class="ad d2"></div>
    <div class="ad d3"></div>
    <div class="ad d4"></div>
    </body>
    </html>

  • 相关阅读:
    Super Mario
    SPOJ Count on a tree
    SPOJ DQUERY
    51nod 区间中第K大的数
    POJ2104 K-th Number
    矩阵模板
    Sasha and Array
    MVC RenderSection
    Lazy Acquisition
    .net4.5 await async 简化之后的异步编程模型
  • 原文地址:https://www.cnblogs.com/lsr111/p/4414276.html
Copyright © 2020-2023  润新知