zoukankan      html  css  js  c++  java
  • css3动态边框

    <ul class="partnersLogo">
      <li>
        <a href="http://www.chinapnr.com/" target="_blank">
          <div class="border_top"></div>
          <div class="border_right"></div>
          <div class="border_bottom"></div>
          <div class="border_left"></div>
          <img src="../images/home/partnersLogo2.jpg" alt="" />
        </a>
      </li>
    </ul>
    

      .partners li a{
        display:block;
        }
      .partners li{
        float:left;
        height:39px;
        padding:12px 0;
        line-height:39px;
        margin-right:7px;

        position:relative;
       }


    .border_top{ position:absolute; height:1px; 0; font-size:0; background:#49d6da; top:11px; left:-1px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_right{ position:absolute; height:0; 1px; font-size:0; background:#49d6da; bottom:9px; right:-1px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_bottom{ position:absolute; height:1px; 0; font-size:0; background:#49d6da; right:0; bottom:9px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .border_left{ position:absolute; height:0; 1px; font-size:0; background:#49d6da; left:-1px; top:12px; -webkit-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out; } .partners li a:hover .border_top{120px} .partners li a:hover .border_bottom{119px} .partners li a:hover .border_left,.partners li a:hover .border_right{height:42px}

      

      

  • 相关阅读:
    Revit二次开发示例:DisableCommand
    Revit二次开发示例:DesignOptions
    C# 非模式窗体show()和模式窗体showdialog()的区别
    Revit二次开发示例:DeleteObject
    被动永远做不好运维
    sudo开发常用命令总结
    ansible 配置了端口在host文件但是还要走22 ip:60001 ansible_ssh_port=60001
    ansible wc -l 对结果值取大小的操作
    mha切换脚本可用的
    mongoDB自动杀执行时间的连接
  • 原文地址:https://www.cnblogs.com/lixiaoxing/p/5391029.html
Copyright © 2011-2022 走看看