我之前的尝试是在身体周围创建一个边框，但在想要创建一个边框旋转动画后，我被迫在所有内容周围创建一个div，但问题是每当我试图在div周围创建一个边框时，它就不会显示出来。
HTML:
<body>
<div class="loader">
<div class="content">
<button id="myBtn" onclick="toggleMute()">Mute</button>
</div>
<script>
var video = document.getElementById("video");
var btn = document.getElementById("myBtn");
var muted = video.getAttribute("muted");
function toggleMute(){
if (muted) {
video.removeAttribute("muted");
btn.innerHTML = "Mute";
} else {
video.setAttribute("muted");
btn.innerHTML = "Unmute";
}
}
</script>
<div class="outer-box-frame">
<video autoplay muted loop id="video">
<source src="video/videoplayback.mp4">
</video>
</div>
</div>
</body>
</html>
CSS:
@use postcss-preset-env;
@use postcss-nested;
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display:block;
box-sizing: border-box;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) );
}
.loader {
border: 5px solid white;
border-style: solid;
display: block;
overflow: hidden;
border-width: 5px;
}
@Damian Zykovic，好像有一个宽度为5px的边框，因为颜色是白色的，所以你看不到边框。只需将边框的颜色更改为可视的颜色，如红色，您将能够看到边框。
另外，关闭加载器
null
<body>
<div class="loader">
<div class="content">
<button id="myBtn" muted onclick="toggleMute()">Mute</button>
</div>
</div>
<style>
@use postcss-preset-env;
@use postcss-nested;
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
box-sizing: border-box;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}
.loader {
border: 5px solid red;
border-style: solid;
display: block;
overflow: hidden;
border-width: 5px;
}
</style>
<div class="outer-box-frame">
<video autoplay muted loop id="video">
<source src="video/videoplayback.mp4">
</video>
</div>
</div>
</body>
</html>