zoukankan      html  css  js  c++  java
  • 前端样式一(淡出二维码图片)

                        <a href="">
                            <img src="images/ft_l3.png" alt="">
                            <div class="ewm">
                                <img src="http://www.vztimes.com/static/default/images/ewm.jpg">
                            </div>
                        </a>

    css

     .ewm {
         width: 120px;
         padding: 5px;
         border-radius: 5px;
         background-color: #fff;
         border: 1px solid #ccc;
         position: absolute;
         bottom: 52px;
         left: 50%;
         margin-left: -60px;
         opacity: 0;
         visibility: hidden;
         transform: translateY(-10px);
         -webkit-transform: translateY(-10px);
         -moz-transform: translateY(-10px);
         -ms-transform: translateY(-10px);
         -o-transform: translateY(-10px);
         transition: all .5s;
         -o-transition: all .5s;
         -ms-transition: all .5s;
         -moz-transition: all .5s;
         -webkit-transition: all .5s;
     }
     
     .ewm:before {
         width: 0;
         height: 0;
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-top: 8px solid #fff;
         content: "";
         position: absolute;
         bottom: -8px;
         left: 50%;
         margin-left: -10px;
     }
     
     a:hover .ewm {
         opacity: 1;
         visibility: inherit;
         transform: translateY(0);
         -webkit-transform: translateY(0);
         -moz-transform: translateY(0);
         -ms-transform: translateY(0);
         -o-transform: translateY(0);
     }
  • 相关阅读:
    DevC++手动开栈
    二分图|网络流建模复习
    C++常用数据类型范围
    卡常剪贴板
    AcWing 2425. 奇怪的计算器
    AcWing 153. 双栈排序 震惊 !2^n 过 1000
    AcWing 352. 闇の連鎖
    AcWing 246. 区间最大公约数
    AcWing 221. 龙哥的问题
    AcWing 381. 有线电视网络
  • 原文地址:https://www.cnblogs.com/111wdh/p/14966006.html
Copyright © 2011-2022 走看看