video effect
페이지 정보
작성자 관리자 작성일 22-06-14 23:33 조회 621 댓글 0본문
<style>
.effect-div { width:100%; background-size:cover; overflow:hidden; position:relative; }
.effect-div video { width:100%; mix-blend-mode:screen; }
.effect-div div { font-size:3rem; font-weight:bold; width:100%; height:100%; position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; }
</style>
<div class=effect-div style="background-image:url('/zz/images/suzy/suzy_grass.jpg');width:50%;">
<video src="/zz/video/square.mp4" autoplay loop muted></video>
<div><a style=color:#ffffff>My Lovely Suzy</a></div>
</div>
<br>
<div class=effect-div style="background-image:url('/zz/images/suzy/suzy_grass.jpg');width:80%;">
<video src="/zz/video/rain.mp4" autoplay loop muted></video>
<div><a style=color:#ffffff>Suzy is Beautifule</a></div>
<audio src="/zz/audio/josumi.mp3" controls></audio>
</div>
<script>
onresize = function() {
for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 9 / 16 + "px";
}
onresize();
</script>
.effect-div { width:100%; background-size:cover; overflow:hidden; position:relative; }
.effect-div video { width:100%; mix-blend-mode:screen; }
.effect-div div { font-size:3rem; font-weight:bold; width:100%; height:100%; position:absolute; top:0px; left:0px; display:flex; justify-content:center; align-items:center; }
</style>
<div class=effect-div style="background-image:url('/zz/images/suzy/suzy_grass.jpg');width:50%;">
<video src="/zz/video/square.mp4" autoplay loop muted></video>
<div><a style=color:#ffffff>My Lovely Suzy</a></div>
</div>
<br>
<div class=effect-div style="background-image:url('/zz/images/suzy/suzy_grass.jpg');width:80%;">
<video src="/zz/video/rain.mp4" autoplay loop muted></video>
<div><a style=color:#ffffff>Suzy is Beautifule</a></div>
<audio src="/zz/audio/josumi.mp3" controls></audio>
</div>
<script>
onresize = function() {
for (effect_div of document.getElementsByClassName("effect-div")) effect_div.style.height = effect_div.offsetWidth * 9 / 16 + "px";
}
onresize();
</script>
댓글목록 0
등록된 댓글이 없습니다.