前端样式一（淡出二维码图片）

                    <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);
 }

标签：translateY,样式,transition,transform,5s,二维码,10px,淡出,border
来源： https://www.cnblogs.com/111wdh/p/14966006.html