亚伦影音工作室 发表于 2023-11-10 14:43

SVG星形测试《人生就是一场自渡(DJ 版)》

本帖最后由 亚伦影音工作室 于 2023-11-11 22:54 编辑 <br /><br /><style type="text/css">
#bj{position: relative;width: 1164px;height: 620px;MARGIN-LEFT:-300px;margin-top:0px;;overflow:hidden;background:url('https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg')no-repeat center / cover;--opt: .2;}
#gp{width: 300px; height: 300px; position: absolute; left: 10%;top: 10%;mask: radial-gradient(transparent 12px,#red 0);-webkit-mask: radial-gradient(transparent 12px,red 0);
animation: spin 18s linear infinite; }
@keyframes spin {
      0% { transform: rotate(360deg)scale(1.2);filter:hue-rotate(360deg)contrast(100%)brightness(200%); } 50% { transform: rotate(0deg)scale(1.2);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 1;}100% { transform: rotate(-360deg)scale(1.2);filter:hue-rotate(0deg)contrast(100%)brightness(100%); opacity: 0.5;}
}
#gc { position: absolute;width: 80%; height: 55px; top: 80%;color: #ff0000;left:10%; font:bold 2.5em 华文隶书; text-align: center;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0); background-image:url(https://z3.ax1x.com/2021/07/10/WSvNo4.);line-height:1100px;}

#mylist {position: absolute; margin-top:2%;margin-left: 70%; color:#fff; width:320px;height:200px; font: normal 1.2em/2em 仿宋;}
#mylist a { text-decoration: none; cursor:pointer; }
#mylist a:hover { color:blue; }
#sj { position: absolute; font: normal 16px sans-serif;color:#fff; top:93%;left:84%;}
#btn{ position:absolute;width:5%;height:5%;top:93%;left:0.4%;border:0px solid #fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;}
#btn::before,#btn::after{position:absolute;content:'';border-style:solid;border-color:#fff;}
#btn::before{width:0;height:0;left:40%;border-width:10px 13px;border-color:transparent transparent transparent #fff;opacity:var(--play);}
#btn::after{width:3px;height:17px;border-width:0 5px 0 5px;opacity:var(--pause);}
#jd {position: absolute;width: 76%; height: 3px;cursor: pointer;top:95.5%;left:5%;border-radius: 2px;}
#musickrc{width:80%;line-height:20px;top:80%;position: absolute;left:10%;cursor: pointer;font-weight:bold; font-family:楷体;font-size: 30px;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;color:#000078;font-weight:bold; font-family:楷体;}
#wzsd1 { animation: wzsd 1.96s linear infinite ; }
@keyframes wzsd {
from {opacity: .1;filter:hue-rotate(360deg)contrast(190%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}

#wzsd2 { animation: wzsda 0.96s linear infinite ; }
@keyframes wzsda {
from {opacity: .1;filter:hue-rotate(360deg)contrast(190%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#pic{position: absolute;background:url()0 0/100%100%;left: 349px; top:142px;width: 70%; height: 321px;
box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; background-repeat:no-repeat;cursor:pointer;}
#cd{position:absolute;top:93%;left:95%;width:30px;height:30px;cursor:pointer;background: url('http://storage.live.com/items/1965B2B1656C2AF6!16327?')no-repeat center/cover}
</style>

<style type="text/css">
#bt{ --w: 81%; width: var(--w); overflow: hidden; color: #ccff33; position: absolute; left:70%;top:2%;font-size: 18px;}
#bt { word-break: keep-all; white-space: nowrap; animation: bt 26s linear infinite; background:#0000}
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>
<divid="bj">
<div id="gp"><svg width="300" height="300">
         <pathd="M190.00 150.00,253.71 166.43,188.04 162.36,243.56 197.67,182.36 173.51,224.25 224.25,173.51 182.36,197.67 243.56,162.36 188.04,166.43 253.71,150.00 190.00,133.57 253.71,137.64 188.04,102.33 243.56,126.49 182.36,75.75 224.25,117.64 173.51,56.44 197.67,111.96 162.36,46.29 166.43,110.00 150.00,46.29 133.57,111.96 137.64,56.44 102.33,117.64 126.49,75.75 75.75,126.49 117.64,102.33 56.44,137.64 111.96,133.57 46.29,150.00 110.00,166.43 46.29,162.36 111.96,197.67 56.44,173.51 117.64,224.25 75.75,182.36 126.49,243.56 102.33,188.04 137.64,253.71 133.57z" fill="#800000" stroke="#fff000" />
       </svg></div>
<divid="img1"></div>
<divid="jd"></div>
<span id="sj">00:00 | 00:00</span>
<div id="mylist"></div>
<divid="btn"></div>
<div id="cd"></div>
<div id="wzsd2"><divid="gc"></div></div>
<div id="pic"></div>
<div id="musickrc"><div id="wzsd1"><span id="musickrc01" style="text-align:left;"></span></div><span id="musickrc02"style="text-align:right; "></span>
</div>
<div id="bt"><div>
</div>

<script>
var lrc= []
lrc =[,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,];
lrc =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
lrc =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
lrc =[
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
lrc = [
       ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
lrc = [,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
lrc =[,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
lrc = [['0.00', '吻别 - 高胜美-'], ['7.28', '曲 - 殷文琦'], ['14.56', '词 - 何启弘'], ['21.85', '前尘往事成云烟'], ['24.66', '消散在彼此眼前'], ['29.60', '就连说过了再见'], ['32.91', '也看不见你有些哀怨'], ['38.10', '给我的一切你不过是在敷衍'], ['46.10', '你笑的越无邪'], ['48.60', '我就会爱你爱得更狂野'], ['52.33', '总在刹那间有一些了解'], ['56.21', '说过的话不可能会实现'], ['60.08', '总在一转眼发现你的脸'], ['64.08', '已经陌生不会再象从前'], ['68.02', '我的世界开始下雪'], ['72.39', '冷得让我无法多爱一天'], ['76.39', '冷得连隐藏的遗憾'], ['80.58', '都那么的明显'], ['83.83', '我和你吻别在无人的街'], ['88.52', '让风痴笑我不能拒绝'], ['91.64', '我和你吻别在狂乱的夜'], ['96.39', '我的心等着迎接伤悲'], ['140.00', '想要给你的思念'], ['142.94', '就像风筝断了线'], ['147.83', '飞不进你的世界'], ['150.99', '也温暖不了你的视线'], ['156.18', '我已经看见一出悲剧正上演'], ['164.34', '剧中没有喜悦'], ['166.71', '我仍然躲在你的梦里面'], ['170.46', '总在刹那间有一些了解'], ['174.33', '说过的话不可能会实现'], ['178.55', '总在一转眼发现你的脸'], ['182.24', '已经陌生不会再像从前'], ['186.16', '我的世界开始下雪'], ['190.60', '冷得让我无法多爱一天'], ['194.54', '冷得连隐藏的遗憾'], ['198.72', '都那么的明显'], ['201.97', '我和你吻别在无人的街'], ['206.60', '让风痴笑我不能拒绝'], ['209.85', '我和你吻别在狂乱的夜'], ['214.46', '我的心等着迎接伤悲'], ['221.66', '我和你吻别在无人的街'], ['226.28', '让风痴笑我不能拒绝'], ['229.53', '我和你吻别在狂乱的夜'], ['234.16', '我的心等着迎接伤悲']];
lrc = [['0.00', '梦醒时分 - 高胜美'], ['11.05', '词 - 李宗盛'], ['22.10', '曲 - 李宗盛'], ['33.15', '你说你爱了不该爱的人'], ['37.53', '你的心中满是伤痕'], ['41.24', '你说你犯了不该犯的错'], ['45.06', '心中满是悔恨'], ['48.18', '你说你尝尽了生活的苦'], ['51.72', '找不到可以相信的人'], ['55.15', '你说你感到万分沮丧'], ['58.77', '甚至开始怀疑人生'], ['64.01', '早知道伤心总是难免的'], ['67.48', '你又何苦一往情深'], ['71.22', '因为爱情总是难舍难分'], ['74.50', '何必在意那一点点温存'], ['77.93', '要知道伤心总是难免的'], ['81.51', '在每一个梦醒时分'], ['85.31', '有些事情你现在不必问'], ['88.66', '有些人你永远不必等'], ['107.16', '你说你爱了不该爱的人'], ['111.63', '你的心中满是伤痕'], ['115.25', '你说你犯了不该犯的错'], ['119.05', '心中满是悔恨'], ['122.32', '你说你尝尽了生活的苦'], ['125.75', '找不到可以相信的人'], ['129.16', '你说你感到万分沮丧'], ['132.80', '甚至开始怀疑人生'], ['138.07', '早知道伤心总是难免的'], ['141.55', '你又何苦一往情深'], ['145.16', '因为爱情总是难舍难分'], ['148.63', '何必在意那一点点温存'], ['152.02', '要知道伤心总是难免的'], ['155.69', '在每一个梦醒时分'], ['159.22', '有些事情你现在不必问'], ['162.80', '有些人你永远不必等'], ['180.37', '早知道伤心总是难免的'], ['183.86', '你又何苦一往情深'], ['187.44', '因为爱情总是难舍难分'], ['190.95', '何必在意那一点点温存'], ['194.32', '要知道伤心总是难免的'], ['197.93', '在每一个梦醒时分'], ['201.54', '有些事情你现在不必问'], ['205.04', '有些人你永远不必等']];
      var xmhy = [
["https://www.qqmc.com/mp3/music299193796.mp3","人生就是一场自渡(DJ 版)-李英"],
["https://www.qqmc.com/mp3/music256912305.mp3","新女人花-陈瑞"],
["http://www.kumeiwp.com/sub/filestores/2022/03/06/fe32c8e9d5e195bb81e3c01a69f0b8ae.mp3","一杯浊酒敬自己"],
["https://file.uhsea.com/2310/29a3f662c23a89f7d119bf9d28a51e75O3.mp3","你的万水千山 (3D环绕版)"],
["https://wj1.zp68.com:812/lxx/yunhua/2022/07/mdcbsls.mp3","梦的翅膀受了伤-蒋雪儿"],
["https://xlaj.cn/assets/file/zp/20231030141835.mp3","天边-乌英嘎 / 云飞"],
["https://wj.zp68.com/lxx/yunhua/2023/03/22/jyxw.mp3","今夜你想我不-未知"],
["https://storage.live.com/items/1965B2B1656C2AF6!17839?","吻别-高胜美"],
["https://storage.live.com/items/1965B2B1656C2AF6!17833?","梦醒时分-高胜美"]
      ];
var __encode ='jsjiami.com',_a={}, _0xb483=["\x5F\x64\x65\x63\x6F\x64\x65","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x6F\x6A\x73\x6F\x6E\x2E\x63\x6F\x6D\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x6F\x62\x66\x75\x73\x63\x61\x74\x6F\x72\x2E\x68\x74\x6D\x6C"];(function(_0xd642x1){_0xd642x1]= _0xb483})(_a);var __Ox108fea=["\x6D\x79\x6C\x69\x73\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x61\x75\x64\x69\x6F","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x62\x74","\x67\x70","\x6C\x65\x6E\x67\x74\x68","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x3C\x61\x20\x69\x64\x3D\x27\x6C\x69\x73\x74","\x27\x20\x6F\x6E\x63\x6C\x69\x63\x6B\x3D\x27\x6C\x6F\x61\x64\x73\x6F\x75\x6E\x64\x28","\x29\x27\x20\x3E","\x2E","\x20\x20\x20\x20","\x3C\x2F\x61\x3E\x3C\x62\x72\x20\x2F\x3E","\x76\x69\x73\x69\x62\x69\x6C\x69\x74\x79","\x73\x74\x79\x6C\x65","\x68\x69\x64\x64\x65\x6E","\x73\x72\x63","\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64\x49\x6D\x61\x67\x65","\x75\x72\x6C\x28","\x29","\x70\x6C\x61\x79","\x76\x69\x73\x69\x62\x6C\x65","\u6B63\u5728\u64AD\u653E\uFF1A","\u9996","\x2F","\x6F\x6E\x65\x6E\x64\x65\x64","\x74\x69\x6D\x65\x75\x70\x64\x61\x74\x65","\x62\x61\x63\x6B\x67\x72\x6F\x75\x6E\x64","\x6C\x69\x6E\x65\x61\x72\x2D\x67\x72\x61\x64\x69\x65\x6E\x74\x28\x39\x30\x64\x65\x67\x2C\x20\x72\x67\x62\x61\x28\x32\x35\x35\x2C\x32\x35\x35\x2C\x32\x35\x35\x29","\x63\x75\x72\x72\x65\x6E\x74\x54\x69\x6D\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x25\x2C\x20\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x74\x20\x30\x29","\x69\x6E\x6E\x65\x72\x54\x65\x78\x74","\x20\x2F\x20","","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x6C\x69\x73\x74","\x63\x6F\x6C\x6F\x72","\x72\x65\x6D\x6F\x76\x65\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x63\x63\x66\x66\x33\x33","\x6F\x6E\x63\x6C\x69\x63\x6B","\x6F\x66\x66\x73\x65\x74\x58","\x6F\x66\x66\x73\x65\x74\x57\x69\x64\x74\x68","\x30\x30\x3A\x30\x30","\x66\x6C\x6F\x6F\x72","\x30","\x3A","\x70\x61\x75\x73\x65\x64","\x2D\x2D\x70\x6C\x61\x79","\x74\x72\x75\x65","\x73\x65\x74\x50\x72\x6F\x70\x65\x72\x74\x79","\x2D\x2D\x70\x61\x75\x73\x65","\x61\x6E\x69\x6D\x61\x74\x69\x6F\x6E\x50\x6C\x61\x79\x53\x74\x61\x74\x65","\x72\x75\x6E\x6E\x69\x6E\x67","\x70\x61\x75\x73\x65","\x63\x64","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x6C\x6F\x67","\u5220\u9664","\u7248\u672C\u53F7\uFF0C\x6A\x73\u4F1A\u5B9A","\u671F\u5F39\u7A97\uFF0C","\u8FD8\u8BF7\u652F\u6301\u6211\u4EEC\u7684\u5DE5\u4F5C","\x6A\x73\x6A\x69\x61","\x6D\x69\x2E\x63\x6F\x6D"];var mlb=document](__Ox108fea);var aud=document](__Ox108fea);var bt=document](__Ox108fea);var gp=document](__Ox108fea);var id=0;for(j= 0;j< xmhy];j++){mlb]+= __Ox108fea+ j+ __Ox108fea+ j+ __Ox108fea+ (j+ 1)+ __Ox108fea+ __Ox108fea+ xmhy+ __Ox108fea};mlb]]= __Ox108fea;musickrc]]= __Ox108fea;function loadsound(_0x7773x7){id= _0x7773x7;aud]= xmhy;pic]]= __Ox108fea+ xmhy+ __Ox108fea;aud]();mlb]]= __Ox108fea;pic]]= __Ox108fea;img1]]= __Ox108fea;gc]]= __Ox108fea;musickrc]]= __Ox108fea;bt]= __Ox108fea+ xmhy]+ __Ox108fea+ __Ox108fea+ (id+ 1)+ __Ox108fea+ xmhy;nameRed(id)}aud]= function(){id++;if(id>= xmhy]){id= 0};aud]= xmhy;pic]]= __Ox108fea+ xmhy+ __Ox108fea;aud]();mlb]]= __Ox108fea;pic]]= __Ox108fea;img1]]= __Ox108fea;musickrc]]= __Ox108fea;gc]]= __Ox108fea;bt]= __Ox108fea+ xmhy]+ __Ox108fea+ __Ox108fea+ (id+ 1)+ __Ox108fea+ xmhy;nameRed(id)};aud](__Ox108fea,()=>{jd]]= __Ox108fea+ aud]/ aud]* 100+ __Ox108fea;sj]= toMin(aud])+ __Ox108fea+ toMin(aud]);for(j= 0;j< lrc];j++){if(aud]>= lrc){gc]= lrc;musickrc01]= lrc;if(j+ 1== lrc]){musickrc02]= __Ox108fea}else {musickrc02]= lrc}}}});function nameRed(){for(k= 0;k< xmhy];k++){let _0x7773x9=__Ox108fea+ k;document](_0x7773x9)]](__Ox108fea)};_0x7773x9= __Ox108fea+ id;document](_0x7773x9)]]= __Ox108fea}jd]= (_0x7773xa)=>{aud]= aud]* _0x7773xa]/ jd]};let toMin=(_0x7773xc)=>{if(!_0x7773xc){return __Ox108fea};_0x7773xc= Math](_0x7773xc);let _0x7773xd=parseInt(_0x7773xc/ 60),_0x7773xe=parseFloat(_0x7773xc% 60);if(_0x7773xd< 10){_0x7773xd= __Ox108fea+ _0x7773xd};if(_0x7773xe< 10){_0x7773xe= __Ox108fea+ _0x7773xe};return _0x7773xd+ __Ox108fea+ _0x7773xe};function playing(){aud]?(btn]](__Ox108fea,__Ox108fea),btn]](__Ox108fea,__Ox108fea)):(btn]](__Ox108fea,__Ox108fea),btn]](__Ox108fea,__Ox108fea))}btn]= function(){aud]?(aud](),gp]]= __Ox108fea):(aud](),gp]]= __Ox108fea)};aud](__Ox108fea,playing,false);aud](__Ox108fea,playing,false);var img=document](__Ox108fea);img]= function(){mlb]]== __Ox108fea?(mlb]]= __Ox108fea):(mlb]]= __Ox108fea);img1]]== __Ox108fea?(img1]]= __Ox108fea):(img1]]= __Ox108fea);pic]]== __Ox108fea?(pic]]= __Ox108fea):(pic]]= __Ox108fea);musickrc]]== __Ox108fea?(musickrc]]= __Ox108fea):(musickrc]]= __Ox108fea);gc]]== __Ox108fea?(gc]]= __Ox108fea):(gc]]= __Ox108fea)};loadsound(id);;;


wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');

wzsd2.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd2.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd2.style.animationPlayState = 'paused');

gp.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });
gp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>gp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>gp.style.animationPlayState = 'paused');

aud.addEventListener('timeupdate', () => {jd.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});

</script>

小辣椒 发表于 2023-11-10 17:52

亚伦把黑黑的太阳花路径做了一键停止，当动画用了{:4_173:}

小辣椒 发表于 2023-11-10 17:55

上去这么多歌曲，可以做专辑的代码帖{:4_199:}

亚伦影音工作室 发表于 2023-11-10 19:21

小辣椒 发表于 2023-11-10 17:52
亚伦把黑黑的太阳花路径做了一键停止，当动画用了

双链全控！

醉美水芙蓉 发表于 2023-11-10 19:36

小辣椒 发表于 2023-11-10 19:58

亚伦影音工作室 发表于 2023-11-10 19:21
双链全控！

看见的，亚伦好棒，一键控制亚伦最拿手了

马黑黑 发表于 2023-11-12 17:06

小辣椒 发表于 2023-11-10 17:52
亚伦把黑黑的太阳花路径做了一键停止，当动画用了

这个用途很是恰当

红影 发表于 2023-11-12 22:20

变色星型图案漂亮，还能当播放器按钮时候。歌词列表选择的时候，还有高亮色提醒。这个帖子真棒。欣赏亚伦老师好帖{:4_187:}

愤怒的葡萄 发表于 2023-11-13 05:41

的确很不错的美化帖，感觉坛友们好有才啊。

焱鑫磊 发表于 2023-11-14 20:15

棒棒哒！{:4_187:}
页: [1]
查看完整版本: SVG星形测试《人生就是一场自渡(DJ 版)》