本帖最后由 花简静 于 2024-8-9 14:19 编辑
<style>
#vid {
width: 400px;
height: 400px;
object-fit: cover;
filter: hue-rotate(0deg);
border-radius: 50%;
}
</style>
<p><video id="vid" src="https://img.tukuppt.com/video_show/3664703/00/02/32/5b55d3a4260ea.mp4" autoplay loop muted></video></p>
<p><output id="msg">filter: hue-rotate(0deg);</output></p>
<p><input id="range" type="range" min="0" max="360" value="0" /></p>
<script>
range.oninput = () => {
msg.value = 'filter: hue-rotate(' + range.value + 'deg);';
vid.style.filter = 'hue-rotate(' + range.value + 'deg)';
};
</script>
|