《南海姑娘》 - 陈 佳（试帖黑黑老师图片配色同步歌词代码6）
本帖最后由 亦是金 于 2024-1-23 10:48 编辑 <br /><br /><style>#mydiv {
position: relative;
margin: 0 0 0 calc(50% - 553px);
width: 1024px;
height: 640px;
border: 6px solid rgba(36, 201, 219,.95);
border-radius: 20px;
background: url('https://z4a.net/images/2023/03/27/254.gif') no-repeat center/cover;
box-shadow: rgba(0,0,0,.6) 4px 6px 12px;
overflow: hidden;
z-index: 1;
}
#mydiv::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: url('https://z4a.net/images/2024/01/21/20240121.gif') no-repeat center/cover;
clip-path: inset(100%);
transition: 2s;
}
#mydiv:hover::before {
clip-path: inset(0% );
}
#player {
position: absolute;
left: 50px;
top: 520px;
width: 80px;
height: 80px;
cursor: pointer;
filter: invert(0.1);
opacity: .85;
animation: rot 6s infinite linear var(--state);
}
#vid {
position: absolute;
top: -60px;
left: -200px;
width: 120%;
height: calc(100% + 60px);
object-fit: cover;
opacity: .50;
mix-blend-mode: screen;/*混合模式:滤色*/
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://www.qqmc.com/mp3/music211910150.mp3" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/29/71/62a58f7365869.mp4" loop></video>
<img id="player" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/anniu11.png" alt="" title="播放/暂停" />
</div>
<script>
(function() {
let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'),vid.pause()) : (mydiv.style.setProperty('--state', 'running'),vid.play());
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.addEventListener('click', ()=> aud.paused ? aud.play() : aud.pause(),false);
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#mydiv',
lrcAr: geci,
btn: 'player',
lrc_css: (`top: 560px; left: 300px; color: rgba(250,250,250,.4); --bg: url('https://z4a.net/images/2024/01/12/auewj-fb7cv.gif'); font-size: 2.2em;`)
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script>
<div style="position: relative; top: -680px; LEFT: -400px;z-index: 12435;">
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: absolute; width: 500px;height: 50px;top:40px;LEFT: 150px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:28px;">《 南 海 姑 娘 》</span>
<span style="color:#3d46f7;"><span style="font-size:22px;"> - 陈 佳</span></div> 清新的湖面，大雁自由自在的再蓝天飞翔，播放器按钮点击可以变换背景图片{:5_150:} 亦是金老师有自己的风格，欣赏佳作，感谢分享{:5_150:} liumang 发表于 2024-1-23 16:33
清新的湖面，大雁自由自在的再蓝天飞翔，播放器按钮点击可以变换背景图片 ...
问好管理！{:5_116:} liumang 发表于 2024-1-23 16:36
亦是金老师有自己的风格，欣赏佳作，感谢分享
谢谢欣赏点赞！{:5_116:} 亦是金 发表于 2024-1-24 17:56
谢谢欣赏点赞！
太客气了{:5_141:} liumang 发表于 2024-1-23 16:33
清新的湖面，大雁自由自在的再蓝天飞翔，播放器按钮点击可以变换背景图片 ...
问好管理！{:5_116:} 试贴。。。。。？
不是正式贴吗？
页:
[1]