亚伦影音工作室 发表于 2023-10-13 10:35

月圆 - 邓寓君

本帖最后由 亚伦影音工作室 于 2023-10-13 10:35 编辑 <br /><br /><style type="text/css">
#papa{ top: 30px;left: -300px; width: 1164px; height: 620px; border-radius: 6px; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/12/22031213462674835656.gif)0 0/40% 100%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/f7d2fb3554aa09ccef9637b12810c103.jpg)no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative;}
#papa::before, #papa::after { position: absolute;content: '';border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/347e7547ea90704a4bed6d9fbddcf72a.jpg)no-repeat center/cover;width: 100%; height: 100%; transition: all 3s linear;z-index: 1;mix-blend-mode:soft-light; }
#papa::before {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);transform: translate(0%,0%) rotate(0deg) scale(1);opacity: 1;}
#papa::after{clip-path: polygon(25% 100%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 100%);transform: translate(100%,-100%) rotate(0deg) scale(1); opacity: 1; }
#papa:hover::before {clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);transform: translate(0%,0%) rotate(0deg) scale(1); opacity: 1; }
#papa:hover::after{clip-path: polygon(25% 100%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 100%);transform: translate(0%,0%) rotate(0deg) scale(1);opacity: 1;}
#musickrc{width:80%;line-height:40px;position: absolute;position: absolute;left:10%;top:80%;z-index: 11;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);}
#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>
<audio id="aud" src="https://www.qqmc.com/mp3/music304576624.mp3" loop="loop" autoplay="autoplay" ></audio>
<divid="musickrc" >
<divid="wzsd1" ><p id="musickrc01"style="color:#ff0000;text-align:left;font-weight: ;font-family:华文隶书;font-size: 40px;" ></P></div>
<P id="musickrc02"style="color:#000078;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="42" y="-29" width="50" height="50" xlink:href="https://xlaj.cn/assets/file/zp/20231008131301.png"></image>
                <text id="du" x="90" y="0">00:00</text>
      </g>
</svg>
<img id="img_border"src="https://pic.imgdb.cn/item/6430f41f0d2dde577706d0ec.png" >
</div>
</div>
<script type="text/javascript">var songkrc =`月圆 - 邓寓君(等什么君)
词；周仁/满杰Babycloth
曲：满杰Babycloth
编曲：满杰Babycloth
制作人：亚伦
出品：亚伦影音
。。。。。。
入夜的河畔芳草 依稀
芸香早已散
荷叶上的露水晃
烛火 阑珊
笑过世间平淡
布衣青染御寒
风掀书典 会停在哪番
海棠 摇曳慢 转玉盘
杯酒 莫贪欢
佳人 扣门环 遥寄思 两端
暮云 溢清寒 曲晕染
遥看 云潺潺
秋凉 风轻淡 我燃灯 一盏
未出阁的女子 对铜镜
挑笔画眉尖
燕子南飞留空巢 挂在 屋檐
老者解开卷帘 月挂树梢凭栏
看惯朝暮 又添了几番
海棠 摇曳慢 转玉盘
杯酒 莫贪欢
佳人 扣门环 遥寄思 两端
暮云 溢清寒 曲晕染
遥看 云潺潺
秋凉 风轻淡 我燃灯 一盏
海棠 摇曳慢 转玉盘
杯酒 莫贪欢
佳人 扣门环 遥寄思 两端
暮云 溢清寒 曲晕染
遥看 云潺潺
秋凉 风轻淡 我燃灯 一盏
`;
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://xlaj.cn/assets/file/zp/20231008131321.png',
      pauseImg = 'https://xlaj.cn/assets/file/zp/20231008131301.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>

红影 发表于 2023-10-13 11:09

又是个可以鼠标操控的效果，很漂亮。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2023-10-13 11:19

空心多边形裁剪做得很不错{:4_204:}

小辣椒 发表于 2023-10-16 18:42

啊，··这个漂亮，居然可以这个效果出来，掌声送上{:4_199:}

小辣椒 发表于 2023-10-16 18:42

谢谢亚伦的精彩制作
页: [1]
查看完整版本: 月圆 - 邓寓君