美文网首页
视屏点击放大效果

视屏点击放大效果

作者: c59ffede9db6 | 来源:发表于2017-05-08 11:05 被阅读0次
    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .bb{width: 320px;height: 420px;}
            .bb{border:1px solid #fff;}
            .bb:hover{box-shadow: 1px 1px 1px #ccc;}
            .bb .aa{background: red;width: 300px;height: 300px;margin: 10px;overflow: hidden;}
            .bb .aa img{}
            .bb .aa img:hover{
                transform: scale(1.1);
                transform-origin: 50% 50%;
            }
             .bb .aaa{position: relative;display:inline-block;transform: translate(70px,0);}  
        </style>
        <meta charset="utf-8">
    </head>
    <body>
    <div class="bb">
    <div class="aa">
        ![](0.jpg)
    
    </div>
    <h3>php视屏教学</h3>
    <span>主讲人:雄伟</span>
    <span class="aaa">播放次数:5000</span>  
    </div>
    
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:视屏点击放大效果

          本文链接:https://www.haomeiwen.com/subject/uhjmtxtx.html