醉美水芙蓉 发表于 4 天前

【云荷六月同图】作品精彩展现

<style>
#papa{
margin: 50px auto;
width:1800px;
height:1020px;
   left: -380px;
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" />
</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>
   

醉美水芙蓉 发表于 4 天前

<div class="ckeditor-html5-audio" style="text-align: center;">
<audio controls="controls" autoplay="autoplay" src="https://i.uik.cc/view.php/22377fc55982925f3b9d33d73347f904.mp3">&nbsp;</audio>
</div>

<p>&nbsp;</p>

绿蔷薇 发表于 4 天前

荟萃了部分六月同图佳作，转页流畅，配乐动人，芙蓉创意粉棒，制作精美~~~{:5_130:}

绿蔷薇 发表于 4 天前

问好芙蓉，制作辛苦了，遥祝端午假期安康~~~{:9_259:}

游侠 发表于 4 天前

用心的编辑 精彩的轮播 六月的盛宴

念若莲 发表于 4 天前

六月的同图精彩纷呈，芙蓉姑娘创意无限{:9_285:}

念若莲 发表于 4 天前

问好芙蓉姑娘{:9_285:}

云端漫步 发表于 4 天前

问好芙蓉，荟萃了部分六月同图佳作，图释文意充分完美，制作精心精彩转页流畅。
好帖狠赞哦，欣赏问好，辛苦了！

圊圊淥詶 发表于 4 天前

不错，最美轮播了同图，很别致新颖，费心了，很漂亮~~

圊圊淥詶 发表于 4 天前

这首蛐蛐也好听，配这些图图很适合，谢谢最美，制作辛苦了哦~~{:1_154:}
页: [1] 2
查看完整版本: 【云荷六月同图】作品精彩展现