哪里的天空不下雨
本帖最后由 杨帆 于 2025-3-22 14:35 编辑 <br /><br /><style>.papa {
margin: 130px-340px;
width: 1280px;
height: 730px;
background:deeppinkurl() no-repeat center/100% 100%;
position: relative;
overflow: hidden;
border-radius: 32px;
box-shadow: 3px 3px 6px gray;
z-index: 1;
}
.bg666 { background: #666; }
#cndpt{
margin: 0px0px ;
z-index: 10;
mix-blend-mode: lighten;
cursor: pointer;
position:relative;
width: 100%;
height: 100%;
transform: rotatez(0deg)rotateX(0deg);
background: url(yanhua01.gi)no-repeat center/100% 100%;
}
#vid1{
width: 100%;
height: 100%;
z-index: -1;
position:absolute;
top:0px;opacity: .7;
left:0px;
object-fit: cover;
pointer-events: none;
}
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #880000, #ff0000, #80ef03);
position: absolute;z-index: 4;
left: 50%;
transform: translate(-50%);
top: 85%;
font:normal 2.4em 华文新魏;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#clone_player0,#clone_player1, #clone_player2, #clone_player3, #clone_player4, #clone_player5, #clone_player6, #clone_player7, #clone_player8, #clone_player9, #clone_player10 {
position: absolute;
width: 100%;
height: 100%;
left: 10%;
top: 50%;
width: 33px;
height: 3px;
border-radius: 50%;
background:#00ff00;
box-shadow: 0px 0px 10px #ff0000;
--time: .4s;
animation: rotating 0.65s var(--time) infinite alternate linear var(--state);
}
#clone_player0 { --time: 5.4s; left: 5%; top: 90%; filter: hue-rotate(30deg); }
#clone_player1 { --time: 1.4s; left: 78%; top: 92%; filter: hue-rotate(30deg); }
#clone_player2 { --time: 2.4s; left: 85%; top: 80%; filter: hue-rotate(50deg); }
#clone_player3 { --time: 2.0s; left: 70%; top: 93%; filter: hue-rotate(60deg); }
#clone_player4 { --time: 1.4s; left: 60%; top: 84%; filter: hue-rotate(40deg); }
#clone_player5 { --time: 3.4s; left: 50%; top: 80%; filter: hue-rotate(10deg); }
#clone_player6 { --time: 2.6s; left: 40%; top: 91%; filter: hue-rotate(60deg); }
#clone_player7 { --time: 1.0s; left: 31%; top: 85%; filter: hue-rotate(40deg); }
#clone_player8 { --time: 3.4s; left: 93%; top: 86%; filter: hue-rotate(10deg); }
#clone_player9 { --time: 2.4s; left: 22%; top: 94%; filter: hue-rotate(20deg);}
#clone_player10 { --time: 0.4s; left: 15%; top: 88%; filter: hue-rotate(60deg); }
@keyframes rotating {
from { transform: translate(0,0px) rotate(0deg)scale(1);}
to { transform: translate(0px,-80px) rotate(2480deg)scale(1);filter: hue-rotate(360deg); }
}
</style>
<div class="papa" id="papa">
<div id="cndpt">
<div id="clone_player0"></div>
<div id="clone_player1"></div>
<div id="clone_player2"></div>
<div id="clone_player3"></div>
<div id="clone_player4"></div>
<div id="clone_player5"></div>
<div id="clone_player6"></div>
<div id="clone_player7"></div>
<div id="clone_player8"></div>
<div id="clone_player9"></div>
<div id="clone_player10"></div></div>
<video id="vid1" src="https://cccimg.com/view.php/db31606aa79df01d203179111321ea44.mp4" loop muted autoplay=""></video>
<div id="lrc" data-lrc="">哪里的天空不下雨</div>
<audio id="aud" src="https://cccimg.com/view.php/f041b7d750b703fe02cc7879cfd7b712.mp3" autoplay loop></audio>
<div id="mplayer"></div></div>
<script>
(function(){
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? ( papa.style.setProperty('--state', 'paused')) : ( papa.style.setProperty('--state', 'running'));
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('seeked', () => calcKey());
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow;background: black; border: 0px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 92%; left: 90%; font:normal 1.5em 华文楷体;',
});
(function() {
/*原始lrc歌词*/
let lrcStr = `
哪里的天空不下雨 - 梁雁翎/黄凯芹 (Christopher Wong)
词：黄凯芹/李亚
曲：陈容森
男：别说你已被改变
只得失意
心有千千结
千串相思
谁没有一些悲衰从前事
女：别说你没有心情
结束忧郁
所有的伤痛留给自己
锁在没有人去的小屋里
男：寂寞让我想清楚许多往事
女：我有我的灰色回忆
男：我会随缘
女：我不忧虑
男：请你告诉我
合：哪里的天空不下雨
男：别说你已被改变
只得失意
心有千千结
千串相思
谁没有一些悲衰从前事
女：别说你没有心情
结束忧郁 男：喔
所有的伤痛留给自己 男：喔
锁在没有人去的小屋里
男：寂寞让我想清楚许多往事
女：我有我的灰色回忆
男：我会随缘
女：我不忧虑
男：请你告诉我
合：哪里的天空不下雨
男：寂寞让我想清楚许多往事
女：我有我的灰色回忆
男：我会随缘
女：我不忧虑
男：请你告诉我
合：哪里的天空不下雨
男：我会随缘
女：我不忧虑
男：请你告诉我
合：哪里的天空不下雨
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/*格式化时间信息*/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
(function() {
const vids = document.querySelectorAll('#vid1');
var mState = () => {
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.onplaying = aud.onpause = () => mState();
})();
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};
</script >
<script>
var papa = document.querySelector('.papa ');
papa.onclick = () => {
papa.classList.toggle('bg666');
//console.log(papa.classList.value);//打印当前class列表
};
</script>
这个也是旋转跳跃的小棍，有趣。背景视频选得和歌曲很相符。
欣赏杨帆好帖{:4_199:} 红影 发表于 2025-3-20 09:54
这个也是旋转跳跃的小棍，有趣。背景视频选得和歌曲很相符。
欣赏杨帆好帖
谢谢影子鼓励！是啊，从亦是金老师贴学习亚伦老师的跳跃小星代码 杨帆 发表于 2025-3-20 10:27
谢谢影子鼓励！是啊，从亦是金老师贴学习亚伦老师的跳跃小星代码
这个制作非常漂亮，歌曲也好听，很赞{:4_187:} 欣赏，这个特效好看{:4_190:} 小九 发表于 2025-3-20 11:43
欣赏，这个特效好看
谢谢小九版主支持与鼓励，祝开心{:4_204:} 视频背景手机不够友好，电脑欣赏效效果完美 欣赏杨帆的精彩制作 小辣椒 发表于 2025-3-20 13:35
视频背景手机不够友好，电脑欣赏效效果完美
谢谢小辣椒鼓励！哪种方式看效果好就选择哪种呀{:4_204:} 问好杨帆老师！制作精彩。欣赏点赞！{:4_190:} 亦是金 发表于 2025-3-20 15:16
问好杨帆老师！制作精彩。欣赏点赞！
此贴学习了您的帖，谢谢亦是金老师鼓励{:4_191:} 纯视频加歌词效果很好。赞！{:4_199:} 梦江南 发表于 2025-3-20 15:44
纯视频加歌词效果很好。赞！
谢谢江南老师支持与鼓励{:4_204:} 杨帆 发表于 2025-3-20 15:28
此贴学习了您的帖，谢谢亦是金老师鼓励
杨帆老师谦虚了！我只是抄作业瞎拼凑做个帖子而已！{:5_102:} 这样的播放器有趣，以为要去抓那些跳动的小星星了{:4_173:} 这个播放器是背景视频？ 欣赏杨帆的和制作，感谢分享{:4_187:} 亦是金 发表于 2025-3-20 16:42
杨帆老师谦虚了！我只是抄作业瞎拼凑做个帖子而已！
你的帖很新颖，开心第一{:4_191:} 绿叶清舟 发表于 2025-3-20 21:07
这样的播放器有趣，以为要去抓那些跳动的小星星了
呵呵，好玩吧，开心第一{:4_204:} 冬天的雨 发表于 2025-3-23 20:04
这个播放器是背景视频？
瞎玩呢，谢谢冬雨版主支持与鼓励{:4_191:}
页:
[1]
2