亚伦影音工作室 发表于 2022-6-30 21:24

(DJ) -

本帖最后由 亚伦影音工作室 于 2023-10-10 22:00 编辑 <br /><br /><style type="text/css">
#Btn {width: 80px;
      height: 142px;
      border: none;
      outline: none;
      border-radius: 8px;position:relative; left:80px; top: 80px;
      background: transparent url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif') no-repeat;
      cursor: pointer;
      
</style>

<div style="position: relative; left:-130px; width:1050px; height: 600px; top:20px; text-align:center;background: url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(http://chuangshicdn.data.mvbox.cn/album/22/03/04/22030409205677912653.gif)0 0px/100% 100%, linear-gradient(0deg, #000080, #883300, #882222, #000000);">
      <img src="https://img-baofun.zhhainiao.com/fs/874a611583bd93eed87052435a0a441e.jpg"style="width: 820PX; height: 500PX;position:absolute;top:60px;left:0px;-webkit-mask-image: radial-gradient(black 30% ,transparent 70%);" >
      <div style="position:absolute; width:200px; left:450px; top: 380px; text-align:center;">


<div style="position:absolute; width:100px; left:280px; top: -30px; text-align:center;">
                <audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=143359030" loop="loop" autoplay="autoplay" ></audio>
                <p id="Btn" ></p>
          </div>
<div id="musickrc" style="position:absolute;top:-260px;left:60px;z-index: 650;">
<span id="musickrc01" style="color:#ff0000;transform: translate(0%,0%);"></span><span id="musickrc02"style="color:#000079;transform: translate(0%,0%);"></span>
</div>

<div class="mt10"style="position:absolute;top:0px;left:0px;">
    <div class="img_border"><img src="http://image.hnol.net/c/2022-01/08/11/20220108115931931-5769293.jpg" id="aplay"style="width: 100%; height: 100%;position:absolute;top:60px;left:-400px;transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);" ></div>
</div>
      </div>

<script language="javascript">

var mu = document.getElementById('aud');
var btn = document.getElementById('Btn');

btn.onclick = function(){
      mu.paused ? (aud.play(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.gif')") : (aud.pause(), btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')");
}
aud.addEventListener("ended", function(){
      btn.style.background="url('https://wj.zp68.com/lxx/yunhua/2022/06/27/13.png')";
})

</script>
<style type="text/css">

.img_border{display:inline-block;width:120px;height:120px;margin:0px ;position: absolute;top:0px; left:0px;z-index: 100;}
.img_border #aplay{border:6px solid #cccccc;border-radius:50%; z-index: 100;}
.z360z{-webkit-animation:rotating 10s linear infinite;}@-webkit-keyframes rotating{0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}
#musickrc{width:420px;line-height:40px;margin:180px auto;padding:0px;;position: absolute;left:0px;z-index: 650;}
#musickrc span {display:block;text-align:center;font-size: 25px; font-family:;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
</style>


<script type="text/javascript">
var songkrc = `爱着你的人留不住你的心 - 天籁天
作词：陈红卫
作曲：王帅
编曲：DJcandy Mix
监制：杨优秀 马明
出品人：亚伦
制作人：亚伦
出品发行：亚伦影音
每当我望着天空怔怔出神
搞不懂你对我的爱是假是真
总感觉你的心就像飘荡的白云
随风自由来去转眼无痕
多次我走进回忆苦苦追问
想知道对我的情到底有几分
默默地盼着你捱过一冬又一春
依旧未能换来你的转身
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉
每当我望着天空怔怔出神
搞不懂你对我的爱是假是真
总感觉你的心就象飘荡的白云
随风自由来去转眼无痕
多次我走进回忆苦苦追问
想知道对我的情到底有几分
默默地盼着你捱过一冬又一春
依旧未能换来你的转身
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉
爱着你的人却留不住你的心
这样的遭遇真的有点太残忍
都怪我太单纯错付了缘分
为你我关上爱别人的门
爱着你的人却留不住你的心
这样的结局真的叫人好心疼
也许就是命运喜欢捉弄人
就让我独自在人海浮沉
`;
function parseLyric(text) { var lines = text.split('✔'),pattern = /\[\d{2}:\d{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");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function(){document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};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();</script>

醉美水芙蓉 发表于 2022-6-30 21:25

红影 发表于 2022-6-30 21:31

制作真漂亮。欣赏亚伦老师好作品{:4_187:}

小辣椒 发表于 2022-7-1 01:02

发现亚伦影音工作室学习的真快，一下子按钮 打字效果都学会了{:4_199:}

小辣椒 发表于 2022-7-1 01:03

谢谢黑黑老师的教程分享，大家一起学习了
页: [1]
查看完整版本: (DJ) -