云荷六月同图精彩展现
<style>#papa{
margin: 50px auto;
width:1800px;
height:1020px;
left: -480px;
background: gray url('https://www.yhyhlt.com/data/attachment/forum/202606/14/143210p85pjzt5oo22ctun.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
overflow:hidden;
}
#vid {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
opacity: 1;
filter:contrast(120%);
transform: scale(1.1, 1.1);
transform-origin: center center;
}
#photo img {
width: 100%;
height: 100%;
position: absolute;
border: 0px solid #000000;
top: 0px;
left: 0px;
filter: contrast(150%)brightness(100%);
-webkit-mask-image:radial-gradient(black 100%,transparent 100%);
opacity: 0;
animation-name: round;
animation-duration: 48s;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* 核心居中修复 */
object-fit: cover;
transform-origin: center center;
}
/* 修复动画：全程以中心缩放，不左右偏移 */
@keyframes round {
0% {
opacity: 0;
transform: translate(-50%,-50%) scale(0);
top: 50%;
left: 50%;
}
5% {
opacity: 1;
transform: translate(-50%,-50%) scale(0);
top: 50%;
left: 50%;
}
14% {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
16% {
opacity: 1;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
24% {
opacity: 0;
transform: translate(-50%,-50%) scale(1);
top: 50%;
left: 50%;
}
}
#photo img:nth-child(10) { animation-delay: 54s; }
#photo img:nth-child(9) { animation-delay: 48s; }
#photo img:nth-child(8) { animation-delay: 42s; }
#photo img:nth-child(7) { animation-delay: 36s; }
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(5) { animation-delay: 24s; }
#photo img:nth-child(4) { animation-delay: 18s; }
#photo img:nth-child(3) { animation-delay: 12s; }
#photo img:nth-child(2) { animation-delay: 6s; }
#photo img:nth-child(1) { animation-delay: 0s; }
/* 歌词容器样式 */
#lrcBox{
position: absolute;
left: 50%;
top: 82%;
transform: translateX(-50%);
width: 800px;
height: 120px;
overflow: hidden;
z-index: 9999;
text-align: center;
pointer-events: none;
font-family: "华文隶书",sans-serif;
}
#lrcList{
transition: transform 0.5s ease;
}
.lrc-line{
font-size: 28px;
line-height: 40px;
color: rgba(255,255,255,0.6);
text-shadow: 1px 1px 3px #000;
}
.lrc-line.active{
color: #fff;
font-size: 32px;
font-weight: bold;
text-shadow: 0 0 8px #fff,2px 2px 4px #000;
}
#mplayer {
position: absolute;
width: 300px;
height: 300px;
left:90%;
z-index: 10;
top:80%;
mix-blend-mode:exclusion;
transform:perspective(0px) rotateY(0deg)rotateX(0deg)scale(1.0);
}
#an{
position: absolute;
top:0%;
left:0%;
width: 100%;
height:100%;
z-index: 5;
pointer-events: none;
}
@keyframes cover1{
0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 {
0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
#fullscreen {
position: absolute;
top:5%;
left:85%;
color:#ffffff;
filter:drop-shadow( 1px 1px 1px #000000);
font: normal 2.0em 华文隶书;
opacity: 1;
cursor: pointer;
z-index: 9999;
}
/* 新增：音频控制按钮样式 */
#audioControl {
position: absolute;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
z-index: 10000;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transition: transform 0.3s ease;
}
#audioControl:hover {
transform: scale(1.1);
}
#audioControl.playing {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
#audioControl img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* 轮播标题居中补充样式 */
#carouselTitle{
position: absolute;
top:30px;
left:50%;
transform: translateX(-50%);
font-family:华文隶书;
font-size:36px;
color:#fff;
text-shadow:2px 2px 6px #000;
z-index:99;
}
</style>
<div id="papa">
<span id="fullscreen"></span>
<!-- 新增：轮播图标题 -->
<div id="carouselTitle">云荷六月同图精彩展现</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/72/5b491dd2b9164.mp4" muted autoplay loop></video>
<div id="photo">
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/14/143210p85pjzt5oo22ctun.jpg" />
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/15/120745i007k0r8ycw7h73z.jpg" />
<img class="photo" src="https://644220.freep.cn/644220/2/q112.jpg" />
<img class="photo" src="https://644220.freep.cn/644220/2/66g.jpg" />
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/13/202749yhcykymii800ikhm.jpg" />
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/11/102138aquuuqqkquokwc4v.jpg" />
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/07/121203a8ama1uejwdu801x.jpg" />
<img class="photo" src="https://644220.freep.cn/644220/2/44r.jpg" />
<img class="photo" src="https://ctyh.oss-cn-qingdao.aliyuncs.com/yh/358.jpg" />
<img class="photo" src="https://i.uik.cc/view.php/e00ca471c97672f0acc155bde9beaa1d.gif" />
<img class="photo" src="https://www.yhyhlt.com/data/attachment/forum/202606/20/194319en1q2u8ourwwonnn.jpg" />
<img class="photo" src="https://yw83yw1.oss-cn-shanghai.aliyuncs.com/nrl/0001.jpg" />
</div>
<div id="mydiv"></div>
<div id="img_border" ></div>
<!-- LRC逐行滚动歌词容器 -->
<div id="lrcBox">
<div id="lrcList"></div>
</div>
<div id="mplayer"></div>
<!-- 音频控制按钮 -->
<div id="audioControl" title="点击播放/暂停音乐">
<img src="https://ff.xiaoqiaodali.top:5401/i/2026/04/02/69ce16e493ac6.png" alt="音频控制">
</div>
</div>
<audio id="aud" src="https://i.uik.cc/view.php/22377fc55982925f3b9d33d73347f904.mp3
" loop="">
<script>
// 《半盏残茶好入喉》完整LRC歌词
const lrcText = `
半盏残茶好入喉
演唱：胖头小海
LRC编辑：醉美水芙蓉
晚风轻吹旧梦已凉透
心事沉沉无人来问候
看淡人间爱恨与情仇
半盏残茶好入喉
岁月匆匆往事都带走
不再强求不再去等候
红尘起落一笑都放手
清苦入肠心也温柔
半盏残茶好入喉
半生风雨半生休
不问繁华与拥有
只愿安稳度春秋
半盏残茶好入喉
万般苦涩都看透
余生平淡无他求
心安便是好时候
岁月匆匆往事都带走
不再强求不再去等候
红尘起落一笑都放手
清苦入肠心也温柔
半盏残茶好入喉
半生风雨半生休
不问繁华与拥有
只愿安稳度春秋
半盏残茶好入喉
万般苦涩都看透
余生平淡无他求
心安便是好时候
半盏残茶好入喉
半生风雨半生休
不问繁华与拥有
只愿安稳度春秋
半盏残茶好入喉
万般苦涩都看透
余生平淡无他求
心安便是好时候
谢谢欣赏！
`;
const aud = document.getElementById('aud');
const lrcList = document.getElementById('lrcList');
const audioControl = document.getElementById('audioControl');
let lrcArr = [];
let isPlaying = false; // 音频播放状态
// 解析LRC
function parseLRC(lrc){
let lines = lrc.trim().split('\n');
let res = [];
lines.forEach(line=>{
let reg = /\[(\d{2}):(\d{2})\.(\d{2})\](.*)/;
let m = line.match(reg);
if(!m) return;
let t = parseInt(m)*60 + parseInt(m) + parseInt(m)/100;
res.push({time:t,text:m});
});
return res;
}
// 生成歌词行
function initLRC(){
lrcArr = parseLRC(lrcText);
lrcList.innerHTML = '';
lrcArr.forEach(item=>{
let p = document.createElement('div');
p.className = 'lrc-line';
p.innerText = item.text;
lrcList.appendChild(p);
});
}
// 同步歌词滚动+高亮
function syncLRC(){
let curTime = aud.currentTime;
let idx = 0;
for(let i=0;i<lrcArr.length;i++){
if(curTime >= lrcArr.time) idx = i;
}
let lines = lrcList.querySelectorAll('.lrc-line');
lines.forEach((line,i)=>{
line.classList.toggle('active',i===idx);
});
// 歌词向上滚动居中
lrcList.style.transform = `translateY(-${idx*40}px)`;
}
// 新增：音频控制按钮点击事件
audioControl.addEventListener('click', function() {
if (isPlaying) {
aud.pause();
audioControl.classList.remove('playing');
} else {
aud.play().then(() => {
audioControl.classList.add('playing');
}).catch(error => {
console.log('音频播放失败:', error);
});
}
isPlaying = !isPlaying;
});
// 新增：音频事件监听，同步按钮状态
aud.addEventListener('play', function() {
isPlaying = true;
audioControl.classList.add('playing');
});
aud.addEventListener('pause', function() {
isPlaying = false;
audioControl.classList.remove('playing');
});
aud.addEventListener('ended', function() {
isPlaying = false;
audioControl.classList.remove('playing');
});
// 初始化歌词
initLRC();
aud.addEventListener('timeupdate',syncLRC);
// 尝试自动播放，由于浏览器限制可能需要用户交互
aud.play().then(() => {
isPlaying = true;
audioControl.classList.add('playing');
}).catch(error => {
console.log('自动播放被阻止，需要用户交互:', error);
isPlaying = false;
audioControl.classList.remove('playing');
});
</script>
漂亮~谢谢精彩分享 klxf 发表于 2026-6-20 21:02
漂亮~谢谢精彩分享
谢谢友友鼓励！
页:
[1]