寂 色
<style>#papa {
margin: 100px 0 30px calc(50% - 730px);
width: 1280px;
height: 760px;
background: url('https://pic.imgdb.cn/item/673312a1d29ded1a8c581ccb.jpg') no-repeat center/cover;
background-blend-mode:color-burn;
pointer-events: none;
overflow: hidden;
display: grid;
place-items: center;
position: relative;
z-index:1;
}
#fullscreen { position: absolute; bottom:20px;; right:20px;font: normal 1.5em/0em 楷体;color:Honeydew; opacity: 1; cursor: pointer;pointer-events: auto; z-index: 3}
#vid1 {
position: absolute;
left:-80px;
top:-80px;
width: 120%;
height:120%;
mix-blend-mode: darken;
mix-blend-mode:soft-light;
opacity: 0.8;
object-fit: cover;
}
#vid3 {
position: absolute;
left:0px;
top:-90px;
width: 100%;
height:130%;
mix-blend-mode:screen;
opacity: 0.8;
object-fit: cover;
}
#player {
position: absolute;
bottom:23%;
left:23%;
width: 80px;
height: 80px;
cursor: pointer;
pointer-events: auto;
border-radius: 50%;
opacity: .98;
animation: rot 8s linear infinite var(--state);
z-index:3;
}
@keyframes rot { to { transform: rotate(360deg); } }
#player:hover { filter: drop-shadow(0 0 80px Gold); }
.tit{
position: absolute;
object-fit: cover;
z-index:2;
top:60px;
width: 220%;
left: 95%;
background-image:url('https://pic.imgdb.cn/item/65a377bd871b83018ac3682a.gif');
background-size:cover;
filter: alpha(opacity=100,finishiopacity=0,style=1) shadow(color=#8C96B5,direction=135) glow(color=#B4BBCF,strength=5);
font: bold 2.6em STFangsong;
font-weight:666;
text-align:left;
line-height:85px;
color:#FFF8DC;
pointer-events: auto;
-webkit-background-clip:text;
}
#marquee{
height: 150px;
overflow: hidden;
}
#marquee > div {
text-align: center;
animation: marquee 25s linear infinite var(--state);
}
#marquee:hover>div{
animation-play-state:paused;
}
#marquee p{
height: 30px;
margin: 0;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div id="papa" class="papa" >
<span id="fullscreen">全屏欣赏</span>
<video id="vid1" src="https://img.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4" autoplay loop muted></video>
<video id="vid3" src="https://img.tukuppt.com/video_show/2629112/00/02/01/5b4eed878e310.mp4" autoplay loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2081921707" autoplay loop></audio>
<img id="player" alt="" src="https://pic.imgdb.cn/item/65b3c398871b83018a80649f.png" title="播放/暂停" />
<div id="marquee" >
<div class="tit">
◇ 《寂色》的旋律温柔细腻，浪漫优美，深情缠绵，能引发人们对生活和自我内心的思考，是一首富有内涵和情感的小提琴独奏曲。<br></div>
</div></div>
<script>
const marquee = document.getElementById('marquee');
const contents =marquee.innerHTML;
marquee.innerHTML = contents + contents;
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
player.title = aud.paused ? '播放' : '暂停';
aud.paused ? (vid1.pause(),vid3.pause()) : (vid1.play(),vid3.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
嵌入的2个视频绚丽，音乐富有情感，令人陶醉，赞，问好老师！ 欣赏收藏老师的[代码佳作]好看又好听，点赞！ 容轩听雨 发表于 2024-11-17 19:52
嵌入的2个视频绚丽，音乐富有情感，令人陶醉，赞，问好老师！
谢谢容轩听雨版主雅评，祝开心 巫荣云师 发表于 2024-11-17 20:54
欣赏收藏老师的[代码佳作]好看又好听，点赞！
谢谢巫荣云师友友鼓励，祝开心
页:
[1]