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);
     }
  • 相关阅读:
    asp后台读id设置样式
    js,需要更多源字符
    列名无效
    asp,对待绑定数据加序号列(DataSet)
    ashx 绝对路径得到物理路径
    方法执行一次js
    小细节
    Spring oauth大致流程
    第六章 分支语句和逻辑运算符
    第七章 函数
  • 原文地址:https://www.cnblogs.com/111wdh/p/14966006.html
Copyright © 2011-2022 走看看