论坛 › 欢乐水吧 › 寂 色

杨帆 发表于 2024-11-12 17:08

寂 色

本帖最后由 杨帆 于 2025-7-10 22:12 编辑 <br /><br /><style>
#papa {
        margin: 150px 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 3.0em STFangsong;
   font-weight:666;
   text-align:left;
   line-height:85px;
   color:DeepPink;
   pointer-events: auto;   
   -webkit-background-clip:text;
}
#marquee{
        height: 150px;
        overflow: hidden;
}
#marquee > div {
    text-align: center;
    animation: marquee 35s 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://file.uhsea.com/2507/5a5e38750b0c71a348041684e1eb2e88DD.mp3" 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>

醉美水芙蓉 发表于 2024-11-12 17:31

冬天的雨 发表于 2024-11-12 18:14

我手机，没有听到音乐，图图漂亮的{:4_199:}

起个网名好难 发表于 2024-11-12 18:14

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

杨帆 发表于 2024-11-12 18:17

冬天的雨 发表于 2024-11-12 18:14
我手机，没有听到音乐，图图漂亮的

谢谢冬天的雨版主支持与鼓励，祝开心{:4_191:}

杨帆 发表于 2024-11-12 18:18

起个网名好难 发表于 2024-11-12 18:14


谢谢起个网名好难友友鼓励{:4_204:}

杨帆 发表于 2024-11-12 18:23

起个网名好难 发表于 2024-11-12 18:19
画面五彩斑斓很漂亮。

给个建议, 把#player段里的   mix-blend-mode:screen;screen; 去掉这样就可以控 ...

好的，谢谢起个网名好难友友{:4_204:}

冬天的雨 发表于 2024-11-12 18:26

换了浏览器，音乐画面都出现了，漂亮极了{:4_199:}

冬天的雨 发表于 2024-11-12 18:27

本帖最后由 冬天的雨 于 2024-11-12 19:07 编辑

欣赏杨帆好制作{:4_199:}
复制链接到浏览器，但浏览器要设置电脑模式就可以看全了

杨帆 发表于 2024-11-12 20:28

冬天的雨 发表于 2024-11-12 18:27
欣赏杨帆好制作
复制链接到浏览器，但浏览器要设置电脑模式就可以看全了

好的，我试一下{:4_204:}

红影 发表于 2024-11-12 20:37

小播很漂亮，还有滚动字的说明，很漂亮的制作。
欣赏杨帆友友好帖{:4_187:}

红影 发表于 2024-11-12 20:39

视频用了挺多，感觉有点乱，个人感觉，勿怪{:4_204:}

红影 发表于 2024-11-12 20:39

杨帆朋友的第一个帖子，加精鼓励。期待友友更多好作品{:4_187:}

小辣椒 发表于 2024-11-12 21:41

问好杨帆，欢迎新朋友一起玩，这个背景制作无论，音乐和画面都比较大气，视频背景手机欣赏不是很友好，发现你不止一个视频吧，看见画面有点乱了，特效点缀一下就可以了，祝你玩的开心{:4_199:}

小辣椒 发表于 2024-11-12 21:42

以后电脑上去还会仔细欣赏，感谢精彩分享{:4_187:}

杨帆 发表于 2024-11-12 22:24

红影 发表于 2024-11-12 20:39
视频用了挺多，感觉有点乱，个人感觉，勿怪

谢谢红影管理员支持与鼓励！刚去掉一个视频，请多指教{:4_204:}

杨帆 发表于 2024-11-12 22:25

小辣椒 发表于 2024-11-12 21:41
问好杨帆，欢迎新朋友一起玩，这个背景制作无论，音乐和画面都比较大气，视频背景手机欣赏不是很友好，发现 ...

谢谢小辣椒管理员支持与鼓励！刚去掉一个视频，请多多指教{:4_204:}

杨帆 发表于 2024-11-13 12:12

醉美水芙蓉 发表于 2024-11-12 17:31
欣赏友友的精彩！

谢谢醉美老师的一贯鼓励、支持与帮助，祝开心{:4_204:}

梦江南 发表于 2024-11-13 16:56

欣赏漂亮的音画制作。{:4_199:}

杨帆 发表于 2024-11-13 17:35

梦江南 发表于 2024-11-13 16:56
欣赏漂亮的音画制作。

谢谢梦江南友友鼓励与支持{:4_204:}

查看完整版本: 寂 色