祝论坛亲人们节日快乐【黑黑老师svg源码改编】

亚伦影音工作室 发表于 2024-10-1 09:32

本帖最后由亚伦影音工作室于 2024-10-2 00:09 编辑 <br /><br /><style type="text/css">
#papa { margin: 210px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/66828bb4d9c307b7e9d49700.jpg)no-repeat center/cover;width: 1280px; height: 720px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#mysvg{ position: absolute;left: 0%; top: 0%;width: 100%; height: 100%;z-index: 2;}
#wzsvg{ position: absolute;left: 10%; top: 20%;width: 90%; height: 160px;z-index: 3;}
#bsvg{ position: absolute;animation: rotsvg linear .52s infinite;z-index: 2;}
#bsvg:nth-of-type(1) { left: 0%; top: 5%;filter: hue-rotate(60deg); }
#bsvg:nth-of-type(2) { left: 50%; top: 15%;width: 300px; height: 300px;filter: hue-rotate(160deg); }
#bsvg:nth-of-type(3) { left: 60%; top: 10%;width: 450px; height: 450px; filter: invert(180);}
.stop #bsvg:nth-child(1),
.stop #bsvg:nth-child(2),
.stop #bsvg:nth-child(3){animation-play-state: paused;}
@keyframes rotsvg { 0%{ transform:translate(0%,0%)scale(.2); filter: hue-rotate(360deg)brightness(1.2)}100%{ transform:translate(0%,0%)scale(.8);opacity: 0.4;}}
#mplayer {position: absolute;
   top:90%; left:40px;z-index: 21;
   width: 60px;
   height: 60px;
   cursor: pointer;transition: 0.5s all ease;
}
.pink {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/6434c8860d2dde5777f15c6a.png')no-repeat center/cover;}
.purple {transition: 0.1s all ease;background: url('https://pic.imgdb.cn/item/6434ca740d2dde5777f40632.png')no-repeat center/cover;}

#tmsg {position: absolute;z-index: 8;
   font: normal 12px sans-serif;
   color: #ffffff;
      bottom: 30px;
   left:92%;}
#prog {position: absolute;z-index: 8;
   width: 82%;
   height: 1.5px;
   cursor: pointer;
      bottom: 35px;
left:9%;
border-radius: 1px;}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 50%; top: 85%;transform: translate(-50%);font:normal 3em 华文新魏; font-weight:400;color: #000;white-space: pre;-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);}
#lrc::before {position: absolute;content: attr(data-lrc);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
</style>
<div id="papa">
<div id="mplayer" class="pink" > </div>
<div id="tmsg">00:00 | 00:00</div>
<div id="prog" title="播放进度条"></div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
<svg id="wzsvg">
<defs>
<filter id="shadow">
<feDropShadow dx="-3" dy="-3" stdDeviation="2" flood-color="#000" flood-opacity=".6"/>
</filter>
</defs>
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="#ff0" stroke="none" font-family="'楷体'" font-weight="bold" font-size="70" font-weight="bold" filter="url(#shadow)">亚伦祝论坛亲人们节日快乐！
<animate attributeName="fill" values="#ff0;#00ff00;#ff0" dur="2s" repeatCount="indefinite" />
</text>
</svg>

<svg id="mysvg" width="1024" height="640">
<rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="snow" stroke-width="8" stroke-dasharray="8 4">
<animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
</rect>
</svg>

<div id="testImg" >
<svg id="bsvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="circle">
<circle cx="0" cy="0" r="8" fill="#fff000" stroke="none"></circle>
</g>
</defs>
<use href="#circle"></use>
<use href="#circle" transform="rotate(0) translate(40)"></use>
<use href="#circle" transform="rotate(0) translate(90)"></use>
<use href="#circle" transform="rotate(0) translate(140)"></use>
<use href="#circle" transform="rotate(0) translate(190)"></use>
<use href="#circle" transform="rotate(30) translate(40)"></use>
<use href="#circle" transform="rotate(30) translate(90)"></use>
<use href="#circle" transform="rotate(30) translate(140)"></use>
<use href="#circle" transform="rotate(30) translate(190)"></use>
<use href="#circle" transform="rotate(60) translate(40)"></use>
<use href="#circle" transform="rotate(60) translate(90)"></use>
<use href="#circle" transform="rotate(60) translate(140)"></use>
<use href="#circle" transform="rotate(60) translate(190)"></use>
<use href="#circle" transform="rotate(90) translate(40)"></use>
<use href="#circle" transform="rotate(90) translate(90)"></use>
<use href="#circle" transform="rotate(90) translate(140)"></use>
<use href="#circle" transform="rotate(90) translate(190)"></use>
<use href="#circle" transform="rotate(120) translate(40)"></use>
<use href="#circle" transform="rotate(120) translate(90)"></use>
<use href="#circle" transform="rotate(120) translate(140)"></use>
<use href="#circle" transform="rotate(120) translate(190)"></use>
<use href="#circle" transform="rotate(150) translate(40)"></use>
<use href="#circle" transform="rotate(150) translate(90)"></use>
<use href="#circle" transform="rotate(150) translate(140)"></use>
<use href="#circle" transform="rotate(150) translate(190)"></use>
<use href="#circle" transform="rotate(180) translate(40)"></use>
<use href="#circle" transform="rotate(180) translate(90)"></use>
<use href="#circle" transform="rotate(180) translate(140)"></use>
<use href="#circle" transform="rotate(180) translate(190)"></use>
<use href="#circle" transform="rotate(210) translate(40)"></use>
<use href="#circle" transform="rotate(210) translate(90)"></use>
<use href="#circle" transform="rotate(210) translate(140)"></use>
<use href="#circle" transform="rotate(210) translate(190)"></use>
<use href="#circle" transform="rotate(240) translate(40)"></use>
<use href="#circle" transform="rotate(240) translate(90)"></use>
<use href="#circle" transform="rotate(240) translate(140)"></use>
<use href="#circle" transform="rotate(240) translate(190)"></use>
<use href="#circle" transform="rotate(270) translate(40)"></use>
<use href="#circle" transform="rotate(270) translate(90)"></use>
<use href="#circle" transform="rotate(270) translate(140)"></use>
<use href="#circle" transform="rotate(270) translate(190)"></use>
<use href="#circle" transform="rotate(300) translate(40)"></use>
<use href="#circle" transform="rotate(300) translate(90)"></use>
<use href="#circle" transform="rotate(300) translate(140)"></use>
<use href="#circle" transform="rotate(300) translate(190)"></use>
<use href="#circle" transform="rotate(330) translate(40)"></use>
<use href="#circle" transform="rotate(330) translate(90)"></use>
<use href="#circle" transform="rotate(330) translate(140)"></use>
<use href="#circle" transform="rotate(330) translate(190)"></use>
</svg>
<svg id="bsvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="circle">
<circle cx="0" cy="0" r="8" fill="#000080" stroke="none"></circle>
</g>
</defs>
<use href="#circle"></use>
<use href="#circle" transform="rotate(0) translate(40)"></use>
<use href="#circle" transform="rotate(0) translate(90)"></use>
<use href="#circle" transform="rotate(0) translate(140)"></use>
<use href="#circle" transform="rotate(0) translate(190)"></use>
<use href="#circle" transform="rotate(30) translate(40)"></use>
<use href="#circle" transform="rotate(30) translate(90)"></use>
<use href="#circle" transform="rotate(30) translate(140)"></use>
<use href="#circle" transform="rotate(30) translate(190)"></use>
<use href="#circle" transform="rotate(60) translate(40)"></use>
<use href="#circle" transform="rotate(60) translate(90)"></use>
<use href="#circle" transform="rotate(60) translate(140)"></use>
<use href="#circle" transform="rotate(60) translate(190)"></use>
<use href="#circle" transform="rotate(90) translate(40)"></use>
<use href="#circle" transform="rotate(90) translate(90)"></use>
<use href="#circle" transform="rotate(90) translate(140)"></use>
<use href="#circle" transform="rotate(90) translate(190)"></use>
<use href="#circle" transform="rotate(120) translate(40)"></use>
<use href="#circle" transform="rotate(120) translate(90)"></use>
<use href="#circle" transform="rotate(120) translate(140)"></use>
<use href="#circle" transform="rotate(120) translate(190)"></use>
<use href="#circle" transform="rotate(150) translate(40)"></use>
<use href="#circle" transform="rotate(150) translate(90)"></use>
<use href="#circle" transform="rotate(150) translate(140)"></use>
<use href="#circle" transform="rotate(150) translate(190)"></use>
<use href="#circle" transform="rotate(180) translate(40)"></use>
<use href="#circle" transform="rotate(180) translate(90)"></use>
<use href="#circle" transform="rotate(180) translate(140)"></use>
<use href="#circle" transform="rotate(180) translate(190)"></use>
<use href="#circle" transform="rotate(210) translate(40)"></use>
<use href="#circle" transform="rotate(210) translate(90)"></use>
<use href="#circle" transform="rotate(210) translate(140)"></use>
<use href="#circle" transform="rotate(210) translate(190)"></use>
<use href="#circle" transform="rotate(240) translate(40)"></use>
<use href="#circle" transform="rotate(240) translate(90)"></use>
<use href="#circle" transform="rotate(240) translate(140)"></use>
<use href="#circle" transform="rotate(240) translate(190)"></use>
<use href="#circle" transform="rotate(270) translate(40)"></use>
<use href="#circle" transform="rotate(270) translate(90)"></use>
<use href="#circle" transform="rotate(270) translate(140)"></use>
<use href="#circle" transform="rotate(270) translate(190)"></use>
<use href="#circle" transform="rotate(300) translate(40)"></use>
<use href="#circle" transform="rotate(300) translate(90)"></use>
<use href="#circle" transform="rotate(300) translate(140)"></use>
<use href="#circle" transform="rotate(300) translate(190)"></use>
<use href="#circle" transform="rotate(330) translate(40)"></use>
<use href="#circle" transform="rotate(330) translate(90)"></use>
<use href="#circle" transform="rotate(330) translate(140)"></use>
<use href="#circle" transform="rotate(330) translate(190)"></use>
</svg>
<svg id="bsvg" width="400" height="400" viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="circle">
<circle cx="0" cy="0" r="8" fill="#fff" stroke="none"></circle>
</g>
</defs>
<use href="#circle"></use>
<use href="#circle" transform="rotate(0) translate(40)"></use>
<use href="#circle" transform="rotate(0) translate(90)"></use>
<use href="#circle" transform="rotate(0) translate(140)"></use>
<use href="#circle" transform="rotate(0) translate(190)"></use>
<use href="#circle" transform="rotate(30) translate(40)"></use>
<use href="#circle" transform="rotate(30) translate(90)"></use>
<use href="#circle" transform="rotate(30) translate(140)"></use>
<use href="#circle" transform="rotate(30) translate(190)"></use>
<use href="#circle" transform="rotate(60) translate(40)"></use>
<use href="#circle" transform="rotate(60) translate(90)"></use>
<use href="#circle" transform="rotate(60) translate(140)"></use>
<use href="#circle" transform="rotate(60) translate(190)"></use>
<use href="#circle" transform="rotate(90) translate(40)"></use>
<use href="#circle" transform="rotate(90) translate(90)"></use>
<use href="#circle" transform="rotate(90) translate(140)"></use>
<use href="#circle" transform="rotate(90) translate(190)"></use>
<use href="#circle" transform="rotate(120) translate(40)"></use>
<use href="#circle" transform="rotate(120) translate(90)"></use>
<use href="#circle" transform="rotate(120) translate(140)"></use>
<use href="#circle" transform="rotate(120) translate(190)"></use>
<use href="#circle" transform="rotate(150) translate(40)"></use>
<use href="#circle" transform="rotate(150) translate(90)"></use>
<use href="#circle" transform="rotate(150) translate(140)"></use>
<use href="#circle" transform="rotate(150) translate(190)"></use>
<use href="#circle" transform="rotate(180) translate(40)"></use>
<use href="#circle" transform="rotate(180) translate(90)"></use>
<use href="#circle" transform="rotate(180) translate(140)"></use>
<use href="#circle" transform="rotate(180) translate(190)"></use>
<use href="#circle" transform="rotate(210) translate(40)"></use>
<use href="#circle" transform="rotate(210) translate(90)"></use>
<use href="#circle" transform="rotate(210) translate(140)"></use>
<use href="#circle" transform="rotate(210) translate(190)"></use>
<use href="#circle" transform="rotate(240) translate(40)"></use>
<use href="#circle" transform="rotate(240) translate(90)"></use>
<use href="#circle" transform="rotate(240) translate(140)"></use>
<use href="#circle" transform="rotate(240) translate(190)"></use>
<use href="#circle" transform="rotate(270) translate(40)"></use>
<use href="#circle" transform="rotate(270) translate(90)"></use>
<use href="#circle" transform="rotate(270) translate(140)"></use>
<use href="#circle" transform="rotate(270) translate(190)"></use>
<use href="#circle" transform="rotate(300) translate(40)"></use>
<use href="#circle" transform="rotate(300) translate(90)"></use>
<use href="#circle" transform="rotate(300) translate(140)"></use>
<use href="#circle" transform="rotate(300) translate(190)"></use>
<use href="#circle" transform="rotate(330) translate(40)"></use>
<use href="#circle" transform="rotate(330) translate(90)"></use>
<use href="#circle" transform="rotate(330) translate(140)"></use>
<use href="#circle" transform="rotate(330) translate(190)"></use>
</svg>
</div>

</div>
<audio id="aud" src="https://cccimg.com/view.php/a814e3dc5bec0d94b99d3ab9d9f50e98.mp3" autoplay="" loop="loop"></audio>
<script>

var image= document.getElementById("testImg");
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),mysvg.unpauseAnimations(),wzsvg.unpauseAnimations(),image.classList.remove('stop')) :(aud.pause(),mplayer.classList.add('purple'),wzsvg.pauseAnimations(),mysvg.pauseAnimations(),image.classList.add('stop')));

/*进度条进度时间*/
prog.onclick = (e) => {
            aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
   }
aud.addEventListener('timeupdate', () => {
            aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, #00ff00, #00ff00, #00ff00 '+ aud.currentTime / aud.duration * 100 + '%, #eeeeee 0)';});
            tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

   });
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;
   };
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `孙艺琪-你是人间最美的景色(DJ默涵版)
作词：崔伟立
作曲：崔伟立
红尘中行人那么多
偏偏能和你擦肩而过
你是那爱情里珍珠在闪烁
时时刻刻温暖我心窝
陪你看春天的花朵
陪你去看冬日的雪落
微微的风儿脸庞轻轻吹过
看那幸福开花又结果
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
陪你看春天的花朵
陪你去看冬日的雪落
微微的风儿脸庞轻轻吹过
看那幸福开花又结果
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
你是人间最美的景色
你是天上耀眼的星河
牵着你的手多少风雨走过
你是独一无二的选择
你是人间最美的景色
你是心上灿烂的烟火
天涯与海角不停流浪漂泊
你是一生唯一的执着
`;
/*变量：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;
/*函数：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => { let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) { if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {ar = item > aver ? aver : item; });
return ar;};
/*函数：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
   let lrcAr = [];
   let calcRule = ;
   for(x of text.split('\n')) {
         let ar = [];
            let re = /\d+[\.:]\d+([\.:]\d+)?/g;
            let geci = x.replace(re,'');
            if(geci) {
                  geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                     let time = x.match(re);
                  if(time != null) {
                           for(y of time) {
                                    let tmp = y.match(/\d+/g);
                                    let sec = 0;
                                    for(z in tmp) sec += tmp * calcRule;
                                    ar = ;
                                    lrcAr.push(ar);
                           }
                  }
            }
   }
   lrcAr.sort((a,b)=> a - b);
   return(lrcTime(lrcAr));
};
/*函数：模拟显示同步歌词*/
let showLrc = (time) => {
   let name = mFlag ? 'cover1' : 'cover2';
   lrc.innerHTML = lrcAr;
   lrc.dataset.lrc = lrcAr;
   lrc.style.setProperty('--motion', name);
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
   mKey += 1;
   mFlag = !mFlag;
};
/*函数：处理当前歌词索引 mKey*/
let calcKey = () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime <= lrcAr) {
                     mKey = j - 1;
                     break;
            }
   }
   if (mKey < 0) mKey = 0;
   if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
   let time = lrcAr - (aud.currentTime - lrcAr);
   showLrc(time);
};
/*格式化时间信息*/
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 ? (lrc.style.setProperty('--state','paused'),mdiv.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mdiv.style.animationPlayState = 'running');
/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
   for (j = 0; j < lrcAr.length; j++) {
            if (aud.currentTime >= lrcAr) {
                     cKey = j;
                     if (mKey === j) showLrc(lrcAr);
      else continue;
   }
}
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

愤怒的葡萄 发表于 2024-10-1 10:03

祝坛友们国庆节快乐！~~

梦油发表于 2024-10-1 10:42

祝亚伦和朋友们国庆节快乐！

庶民发表于 2024-10-1 10:50

国庆节快乐！

红影发表于 2024-10-1 12:26

亚伦老师把这svg效果用做了烟花效果，这构思也很奇妙，运用得很灵巧{:4_199:}

红影发表于 2024-10-1 12:27

欣赏亚伦老师好帖，同祝节日快乐{:4_177:}

红影发表于 2024-10-1 12:30

这样的用法完全没想到，太奇妙了{:4_187:}

小辣椒 发表于 2024-10-1 22:18

出来2个感觉也是配对了，不错效果挺好{:4_199:}

冬天的雨 发表于 2024-10-2 09:32

没有听到音乐

冬天的雨 发表于 2024-10-2 09:32

节日快乐

页: [1]

花潮论坛's Archiver

祝论坛亲人们节日快乐【黑黑老师svg源码改编】