情难忘 - 探戈 （一起欣赏黑黑和清舟的舞姿）学习黑黑希望效果
<style>#papa {
margin: 150px 0 0 calc(50% - 801px);
width: 1440px;
height: 791px;
background: url('https://xlaj.cn/assets/file/zp/20240229124346.gif') no-repeat center/cover;
box-shadow: 3px 3px 6px gray;
overflow: hidden;
display: grid; /* 网格布局 : 配合下句 */
place-items: center; /* 约束子元素绝对居中 */
position: relative; /* 相对定位 : 为绝对定位的子元素提供参照 */
}
.vid {
position: absolute;
top: -100px;
width: 100%;
height: 120%;
object-fit: cover;
mix-blend-mode: screen;
color-dodge; opacity: .05;
}
#player {
top: 570px;
left: 75%;
width: 120px;
height: 114px;
filter: drop-shadow(0 0 8px yellow);
cursor: pointer;
animation: turn 6s linear infinite var(--state);
position: absolute;
}
@keyframes turn { to { transform: rotate(1turn); } }
#dt1{ position: absolute; width:447px; height: 239px; left: 270px; top: 20px; }
</style>
<div id="papa">
<!-- html子元素的次序 ：图片播放器要放在视频之后 -->
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2022/06/23/qnw.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2475824/00/08/35/5d1ea273d3f4f.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/68/71/63e610437126a.mp" loop muted></video>
<img id="player" src="https://wj.zp68.com/lxx/yunhua/2022/06/23/2.png" alt="" />
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2022/06/23/59.png " />
</div>
<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: '#papa',
lrcAr: geci,
btn: '#player',
lrc_css: 'left: 70%; transform: translate(-50%);bottom: 50px;font-size: 1.8em;--bg: linear-gradient(rgba(255,165,0,.5),rgba(255,165,0,.15)); color: Gainsboro;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
(function() {
let mState = () => {
aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<script>
var vids = document.querySelectorAll('.vid');
var vidplay = (play) => vids.forEach(vid => play ? vid.play() : vid.pause());
var mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'), vidplay(false)) : (papa.style.setProperty('--state', 'running'), vidplay(true));
aud.addEventListener('pause', mState);
aud.addEventListener('playing',mState);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<br><br><br><br><br> @緑叶清舟 @黑黑
{:4_172:}{:4_172:} 清舟生日，黑黑陪清舟来一曲{:4_170:} 好了，先下了，晚上见 好像唱的是闽南语？ 二人跳的真好{:4_199:} 跳舞的是少数民族，那楼主说的黑黑是少数民族的？ 美女身材真好{:4_173:} 制作的不错。 世外桃源 发表于 2024-2-29 14:47
好像唱的是闽南语？
内行人{:4_173:} 世外桃源 发表于 2024-2-29 14:48
二人跳的真好
你也是跳舞高手{:4_189:} 世外桃源 发表于 2024-2-29 14:49
跳舞的是少数民族，那楼主说的黑黑是少数民族的？
这个是玩玩的 庶民 发表于 2024-2-29 17:17
制作的不错。
问好庶民，谢谢欣赏{:4_187:} 这舞姿很热烈奔放，好欢乐的帖子啊{:4_199:} 帖子里的光影用得好美。那个灯光效果是岁月的的吧，用在这里很漂亮呢{:4_187:} 这播放器按钮也有趣，和背景效果十分相配呢。亲爱的制作太美了{:4_199:} 原来是马老师和清舟的探戈，冬雨欣赏仔细一点 红影 发表于 2024-2-29 20:41
帖子里的光影用得好美。那个灯光效果是岁月的的吧，用在这里很漂亮呢
亲爱的，这个动图都第二次玩，岁月的东西，黑黑和清舟也是第二次探戈了，只是今天加了黑黑的 （希望）里面的效果 红影 发表于 2024-2-29 20:43
这播放器按钮也有趣，和背景效果十分相配呢。亲爱的制作太美了
按钮找不好，就直接同素了 冬天的雨 发表于 2024-2-29 20:46
原来是马老师和清舟的探戈，冬雨欣赏仔细一点
冬雨也会跳舞？