本帖最后由 花简静 于 2024-8-18 15:41 编辑
<style>
#mydiv {
position: relative;
margin: 130px 0 30px calc(50% - 931px);
width: 1700px;
height: 900px;
box-sizing: border-box;
border: 5px solid;
border-image: linear-gradient(to top right, orange, green, red, cyan) 3 3;
background: url('https://pic.imgdb.cn/item/66a6fda7d9c307b7e9ac8ac5.webp') no-repeat center/cover;
overflow: hidden;
}
.tiezi {
width: 442px;
height: 680px;
right:230px;
top:120px;
background: url('https://pic.imgdb.cn/item/66a75bc9d9c307b7e903db03.png') no-repeat center/cover;
mix-blend-mode: screen;
position: absolute;
}
.tiezi::before, .tiezi::after {
position: absolute;
content: '';
transition: all .45s;
}
.tiezi::before {
inset: 0;
background: rgba(255, 255, 255, 0.00);
backdrop-filter: hue-rotate(var(--hue));
}
.tiezi::after {
right: 360px;
top: 280px;
width: 100px;
height: 100px;
background: url('https://638183.freep.cn/638183/web/svg/flower_1.svg') no-repeat center/cover;
transform: rotate(var(--hue));
pointer-events: auto;
cursor: pointer;
}
.tiezi:hover::before { backdrop-filter: unset; }
#vid1 {
position: absolute;
top:280px;
width: 60%;
height:60%;
opacity: 0.76;
mix-blend-mode: screen;
right:0px;
-webkit-mask: radial-gradient(circle, silver, lightgreen, cyan, transparent,transparent);
transform: rotateX(70deg);
}
#vid2 {
position: absolute;
width: 62%;
height:100%;
right:-20px;
object-fit: cover;
pointer-events: none;
opacity: 1;
top:80px;
mix-blend-mode: screen;
opacity: 0.59;
}
</style>
<div id="mydiv">
<video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bba05658f4.mp4" autoplay loop muted></video>
<video id="vid2" src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f134e2c971.mp4" autoplay loop muted></video>
<div class="tiezi" id="tzi">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1430526273" autoplay loop></audio>
</div>
</div>
<script>
aud.ontimeupdate = () => tzi.style.setProperty('--hue', Math.floor(Math.random() * 360) + 'deg');
tzi.onclick = () => aud.paused ? aud.play() : aud.pause();
setInterval( () => { aud.paused ? vid1.pause() : vid1.play(); },100);
setInterval( () => { aud.paused ? vid2.pause() : vid2.play(); },100);
</script>
| 
