<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>武术</title>
</head>
<style>
.sty {
width: 600px;
height: 380px;
background-color: black;
}
.one {
width: 40px;
height: 200px;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-left: -40px;
z-index: 2;
}
.content {
display: flex;
align-items: center;
}
</style>
<script>
function fun1() {
var p = document.getElementById('k');
p.style.opacity = 1;
}
function fun2() {
var p = document.getElementById('k');
p.style.opacity = 0;
}
</script>
<body>
<div class="content" onmouseover="fun1()" onmouseout="fun2()">
<video class="sty" src="1-A.mp4" controls autoplay></video>
<div id="k" class="one">
<div><img src="分享.png" alt=""></div>
<div><img src="画质.png" alt=""></div>
<div><img src="锁屏.png" alt=""></div>
<div><img src="赞.png" alt=""></div>
</div>
</div>
</body>
</html>
弹性盒子里放入视频
最新推荐文章于 2023-04-22 20:17:17 发布