陈饼饼杭州亚运会翻唱伍佰《再度重相逢》走红网络
本帖最后由 亚伦影音工作室 于 2023-10-12 20:41 编辑 <br /><br /><style type="text/css">#papa{margin: 10px -300px ;width: 1164px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;
height:640px;border: 1px solid;background:#333 url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d02fad515d927d1cd7f5f531c653e9f8.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#papa::before{ position: absolute;top:30%; left:10%; content: ''; width: 350px; height: 350px; background:url('http://chuangshicdn.data.mvbox.cn/album/23/04/16/23041613295221266412.gif') no-repeat center/cover; transition: .7s;z-index: 2;filter: saturate(180%); }
#papa:hover::before { position: absolute;top:44%; left:55%; width: 150px; height: 150px; content: ''; }
#tp{ position: absolute;top:44%; left:50%; width: 100px; height: 150px; ;background:url('https://pic.imgdb.cn/item/6527e674c458853aef503e5a.png') no-repeat center/cover;z-index: 1; }
#musickrc{width:80%;line-height:50px;position: absolute;color:#ff0000;position: absolute;left:10%;top:80%;z-index: 11;
-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)hue-rotate(0deg)contrast(180%)brightness(450%);
-webkit-text-fill-color: transparent;
background-color:#880000;
background-image:linear-gradient(90deg, #000000 40%, #000080 50%, #555555 60%, #ff0000 100%);
background-repeat:no-repeat;
-webkit-animation:loop 2s linear infinite;}
@-webkit-keyframes loop{
0%{background-position: -800px 0;}
}
#musickrc span {display:block;text-align:center;}
#anniudw{ width: 400px; height: 400px; position: absolute; left: 2%;top: 42%;overflow: hidden;}
#mplayer { width: 350px; height: 350px; position: absolute; left: 0px;top: 0px;z-index: 100}
#mplayer text { user-select: none; }
#sPath { cursor: pointer;position:}
#progress { pointer-events: none; }
#btnPlay{ cursor: pointer;position: absolute; filter: brightness(1.2);transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
#btnPlay:hover { cursor: pointer; position: absolute;filter: brightness(1.2);transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
#img_border{display:inline-block;width:160px;height:160px;position: absolute;left: 5px;top: 56px;z-index: 99;
border:6px solid #cccccc;border-radius:50%;animation:rotating 10s linear infinite; }
@keyframes rotating{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}
#wzsd1 { animation: wzsd 0.6s linear infinite ; }
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(100%)brightness(120%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(120%)brightness(100%);}}
#fullscreen { position: absolute; top:10%; left:85%;font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 191;}
</style>
<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<div id="tp"></div>
<audio id="aud" src="https://www.qqmc.com/mp3/music307127041.mp3" loop="loop" autoplay="autoplay" ></audio>
<divid="musickrc" >
<p id="musickrc01"style="color:#ff0000;text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P>
<P id="musickrc02"style="text-align:right;font-weight: ;font-family:华文隶书;font-size: 40px;"></P>
</div>
<div id="anniudw">
<svg id="mplayer">
<path id="sPath" d="M100 5 Q-50 160 190 5" fill="none" stroke="#ffffff"stroke-width="4"></path>
<circle id="progress" cx="10" cy="10" r="5" fill="#1E90FF" stroke="#0000" />
<g transform="translate(30,160)" fill="#ffffff">
<text id="cu" x="0" y="0">00:00</text>
<image id="btnPlay" x="45" y="-22" width="40" height="40" xlink:href="https://www.kumeiwp.com/sub/filestores/2022/12/05/79de7156c08a00eb480d7f1a00b5ba74.png"></image>
<text id="du" x="90" y="0">00:00</text>
</g>
</svg>
<img id="img_border"src="http://imge.kugou.com/stdmusic/20231009/20231009151245672470.jpg" >
</div>
</div>
<script type="text/javascript">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();
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
</script>
<script language="javascript">
let posAr = [];
let len = sPath.getTotalLength();
let playImg = 'https://www.kumeiwp.com/sub/filestores/2022/12/05/2df9122733b83c702ccd579c693a2271.png',
pauseImg = 'https://www.kumeiwp.com/sub/filestores/2022/12/05/79de7156c08a00eb480d7f1a00b5ba74.png';
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 ? btnPlay.setAttribute('xlink:href',playImg) : btnPlay.setAttribute('xlink:href',pauseImg);
let getMinItem = (ar) => {
ar.sort((a,b) => a - b);
return ar;
};
for(i = 0; i < len; i ++) {
posAr.push(sPath.getPointAtLength(i));
}
sPath.onclick = (e) => {
let ex = Math.round(e.offsetX), ey = Math.round(e.offsetY), yAr = [];
for(i = 0; i < len; i ++) {
let px = Math.round(posAr.x), py = Math.round(posAr.y);
if(Math.abs(ex-px) <= 4) {
yAr.push();
}
}
aud.currentTime = getMinItem(yAr) * aud.duration / len;
};
aud.addEventListener('timeupdate', () => {
let idx = Math.round(aud.currentTime * len / aud.duration);
progress.setAttribute('cx',posAr.x);
progress.setAttribute('cy',posAr.y);
cu.textContent = toMin(aud.currentTime);
du.textContent = toMin(aud.duration);
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
img_border.onclick =() =>aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
</script>
沙发我的 人物还是漂移{:4_199:} 亚伦制作的效果越来越美了{:4_199:} 背景很漂亮，播放器按钮和路径也漂亮。
其中一个人物还能随鼠标移动呢。真漂亮的制作。欣赏亚伦老师好帖{:4_199:} 人物移动的路径设计挺好，没掉水里去{:4_173:} 红影 发表于 2023-10-12 20:51
背景很漂亮，播放器按钮和路径也漂亮。
其中一个人物还能随鼠标移动呢。真漂亮的制作。欣赏亚伦老师好帖{: ...
图片掉水里怕啥！ 亚伦影音工作室 发表于 2023-10-12 20:57
图片掉水里怕啥！
好在这个都是在岸边移动的。
我鼠标快速移进移出，看着这人使劲跑来跑去，太过瘾了{:4_189:}
页:
[1]