视屏点击放大效果
<!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">
</div>
<h3>php视屏教学</h3>
<span>主讲人：雄伟</span>
<span class="aaa">播放次数:5000</span>
</div>
</body>
</html>
本文标题：视屏点击放大效果
本文链接：https://www.haomeiwen.com/subject/uhjmtxtx.html
网友评论