一颗痴心念过往 演唱：燕宝儿
本帖最后由 亚伦影音工作室 于 2026-7-11 16:33 编辑 <br /><br /><style>@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");#papa {position: relative; width: 1186px; height: 680px; overflow:hidden;top: 20px;left: -300px; background:#800000 url(https://pic1.imgdb.cn/item/6718e509d29ded1a8ce3654d.jpg)no-repeat center / cover;--state: running; }
#photo img {position: absolute; width: 100%;height: 100%;top: 0px;left: 0px;
opacity: 0;
animation: round 48s linear infinite var(--state);
}
@keyframes round {
0% {
opacity: 1;
-webkit-transform: scale(1);clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);}
6% {
opacity: 1;clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
-webkit-transform: scale(1) ;
}
12% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
18% {
opacity: 1;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(1);
}
20% {
opacity: 0;clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
-webkit-transform:translate(0%,0%)scale(5);
}
}
#photo img:nth-child(1) { animation-delay: 0s;}
#photo img:nth-child(2) { animation-delay: 6s;}
#photo img:nth-child(3) { animation-delay: 12s;}
#photo img:nth-child(4) { animation-delay: 18s;}
#photo img:nth-child(5) { animation-delay: 24s;}
#photo img:nth-child(6) { animation-delay: 30s; }
#photo img:nth-child(7) { animation-delay: 36s;}
#photo img:nth-child(8) { animation-delay:42s;}
#bnt{margin: 10px 30px ;width: 120px;height: 40px;position: absolute; cursor: pointer;}
#ptxt{width:100%;height:6px;font:400 18px/0px "STKaiti";color: #fff;line-height:0px;bottom: 60px;left:50px;position: absolute;}
#musickrc{width:70%;top:73%;position: absolute;left:15%;cursor: pointer;z-index: 5;}
#musickrc span {display:block;text-align:center;line-height:32px; }
#wzsd1 { animation: wzsd 6s infinite forwards var(--state);}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;transform:translate(10%,0%)scale(1.2)}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:85%;color:#FFf;font: normal 2em楷体; opacity: 1; cursor: pointer; z-index: 10}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<divid="photo">
<img src="https://pic1.imgdb.cn/item/6a043d8b6f6a2d474b49f2a1.png" />
<img src="https://pic1.imgdb.cn/item/6a2df0d2f684928e3d6cbc85.png" />
<img src="https://pic1.imgdb.cn/item/6a471bb40e2237bfad5f9b41.png" />
<img src="https://pic1.imgdb.cn/item/6a438f26514f59159c64efe4.png" />
<img src="https://pic1.imgdb.cn/item/6a3ca16752bf8ed03f85efbf.png" />
<img src="https://pic1.imgdb.cn/item/6a2e0509f684928e3d6ce52f.png" />
<img src="https://pic1.imgdb.cn/item/6a2d5bf8f684928e3d6ab816.png" />
<img src="https://pic1.imgdb.cn/item/6a2df0caf684928e3d6cbc84.png" />
</div>
<img id = "bnt" src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png">
<div id="ptxt">0%</div>
<divid="musickrc">
<divid="wzsd1"><p id="musickrc01"style="color:#ff0000;text-align:left;font-family:ZCOOL QingKe HuangYou;font-size: 40px;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);" ></P></div>
<P id="musickrc02"style="color:#eee000;text-align:right;font-weight: ;font-family:ZCOOL QingKe HuangYou;font-size: 40px;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);"></P>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=3397410514.mp3" autoplay loop ></audio>
<script >
var songkrc =`《一颗痴心念过往》
作词：沧桑
作曲：晴琪
演唱：燕宝儿
编辑制作：亚伦影音
一溪秋水冷月光
孤雁声声叹悲凉
相思化作泪儿淌
入心的人怎么忘
回忆作酒入愁肠
情深情浓空一场
天涯茫茫路茫茫
爱隔山海独自望
一颗痴心 念过往
旧伤未愈添新伤
梦里梦外 把你想
想你念你回到我身旁
一颗痴心 念过往
那日一别各一方
花落都有 重开日
可否许我重拾旧时光
回忆作酒入愁肠
情深情浓空一场
天涯茫茫路茫茫
爱隔山海独自望
一颗痴心 念过往
旧伤未愈添新伤
梦里梦外 把你想
想你念你回到我身旁
一颗痴心 念过往
那日一别各一方
花落都有 重开日
可否许我重拾旧时光
`;
function parseLyric(text) { var lines = text.split(/\r|\n|\r\n/),pattern = /\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g,result = []; while (!pattern.test(lines)) {lines = lines.slice(1); }; lines.length === 0 && lines.pop(); lines.forEach(function(v,i,a) { var time = v.match(pattern), value = v.replace(pattern,''); time.forEach(function(v1,i1,a1){ var t = v1.slice(1, -1).split(/:/); result.push(,10) * 60 + parseFloat(t), value]); }); }); result.sort(function(a, b){ return a - b;}); return result;}
var my_audio =document.getElementById("aud");var lyric = parseLyric(songkrc); my_audio.ontimeupdate = function () { for (var i = 0; i < lyric.length; i++) { if(this.currentTime > lyric){ document.getElementById("musickrc01").innerHTML = lyric; if(i+1==lyric.length){ document.getElementById("musickrc01").innerHTML = "";}else{ document.getElementById("musickrc02").innerHTML = lyric;};};};}; my_audio.play();
bnt.onclick = () => aud.paused ? (aud.play(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5441f8fda9783debeed.png") : (aud.pause(),bnt.src = "https://pic1.imgdb.cn/item/6a47a5751f8fda9783decc81.png");
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
aud.addEventListener("timeupdate",function(){
var percent= aud.currentTime / aud.duration
var sp = 600 / 100 ;
var swidth =(percent * 100 * sp) + "px";
console.log(percent*100,swidth)
//保留2位小数
document.getElementById("ptxt").innerText = ((percent*100).toFixed(2))+"%"
})
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
漂亮的轮播效果，图中的美人好美啊，真养眼{:4_204:}
欣赏亚伦老师好帖{:4_199:} 欣赏精彩制作，问好亚伦朋友。 欣赏老师的精彩音画，晚上好！
欣赏亚纶精彩制作{:4_187:} 好听好看，谢谢亚伦老师精彩分享{:4_190:}
页:
[1]