试发代码贴

焱鑫磊 发表于 2023-3-8 10:58

本帖最后由焱鑫磊于 2023-5-17 01:46 编辑 <br /><br /><style>
#papa{margin: 100px -280px ; width: 1164px; height: 640px;background: lightgreen url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/d89a5518621d7711aaa6cd1f3550df26.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 1; overflow:hidden;}

#papa::before{ position: absolute;top:0px; left:0px; content: ''; width: 100%; height: 100%; background:url('https://365.tf/disk/tf/1678286058.gif') no-repeat center/cover; transition:2s;z-index: 2;transform:perspective(600px) rotateX(360deg)scale(1); }
#papa:hover::before { transform:perspective(600px) rotateX(0deg)scale(1);}

#mplayer {position: absolute;grid-template-areas: 'cur btnplay dur''prog prog prog';gap: 10px 4px;display: grid;place-items: center;color: var(--color);font: normal 16px sans-serif;z-index: 999;--bgColor: linear-gradient(to right, var(--prog) 0%, var(--prog) 0%, var(--track) 0%, var(--track));--ww: 260px;--color: hsla(100,10%,80%,.95);--track: hsla(90, 100%, 95%, .65);--prog: hsl(0,50%,50%);}
#btnplay{--state: paused;z-index: 40;
position: absolute;top:-20%; left:40%;
width: 40px;
height: 40px;
cursor: pointer;background:url(https://365.tf/disk/tf/1678287284.png)0px 0px/100% 100%;border-radius:0%;
animation: spin 10s infinite linear;animation-play-state: var(--state);
}
@keyframes spin {0%{transform: rotate(-360deg);filter:hue-rotate(360deg)contrast(120%)brightness(300%)}
100%{transform: rotate(0deg);}
}
#prog {grid-area: prog;-webkit-appearance: none;width: var(--ww); outline: none;background: none;position: relative;}
#prog::-webkit-slider-thumb {-webkit-appearance: none;position: relative;background: var(--prog);top: calc(50% - 10px);cursor: pointer;z-index: 888;}

#prog::-webkit-slider-runnable-track { height: 2px; border-radius: 6px; background: var(--bgColor); }
#prog::-moz-range-track { height: 2px; border-radius: 10px; background: var(--bgColor); }
#cur { grid-area: cur; color: var(--color); }
#dur { grid-area: dur; color: var(--color); }
#lrc {--motion: cover2;--tt: 2s;--state: paused;--bg: linear-gradient(0deg, #FFF000,#FFF000));position: absolute;font: normal 55px 华文隶书;color:#FF0000;white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 0px #000000);z-index: 888;}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { width: 0;} to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="papa">
<div id="before" ></div>

<div id="testImg" >
<div class="yh">
<img src="https://365.tf/disk/tf/1678180278.png" alt="" id="boom1">
<img src="https://365.tf/disk/tf/1678180278.png" alt="" id="boom2">
<img src="https://365.tf/disk/tf/1678103532.png" alt="" id="boom3">
</div>
</div>
<div id="rotate-words">
<div>祝论坛女朋友们节日快乐！<br />
<span>套用亚伦原创音画</span></div>

<div>《归途有风》<br />
<span>演唱：海来阿木</span></div>

<div>作词：学松<br />
<span>作曲：学松</span></div>

<div>出品：焱鑫磊学习制作<br />
<span>Produced by: Aaron Studios</span></div>

<div>LRC编辑：焱鑫磊<br />
<span>整理：焱鑫磊</span></div>
<div>代码设计：亚伦<br />
<span>出品时间：2023.3</span></div>

</div>
<div id="lrc" data-lrc="焱鑫磊博客">焱鑫磊博客</div>

<div id="mplayer"><span id="cur">00:00</span><span id="dur">00:00</span><divid="btn"> <span id="btnplay"></span></div><input type="range" id="prog" step="0.1" max="100" value="0" /></div>

</div>
<audio id="aud" src="https://365.tf/disk/tf/1678339934.mp3" loop autoplay></audio>

<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, mDrag = false;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onmousedown = () =>mDrag =true;prog.onmouseout = () => mDrag = false;prog.onchange = () => { aud.currentTime = aud.duration * prog.value / 100; mDrag = false; };prog.onmousemove = () => prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);aud.addEventListener('timeupdate', () => {cur.innerText = toMin(aud.currentTime);dur.innerText = toMin(aud.duration);prog.style.setProperty('--bgColor', `linear-gradient(to right, var(--prog) 0%, var(--prog) ${prog.value}%, var(--track) ${prog.value}%, var(--track))`);if(mDrag===false) prog.value = aud.currentTime / aud.duration * 100;for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'), btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state', 'running'), btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 1, offset = 0;
let geci = `《归途有风》海来阿木
词/曲：学松
回望来时的颠簸
前路多少起和落
只为心中那盏灯火
万水千山都值得
不问去路多坎坷
可有拼出个结果
想到等你的那个人
忘了自己在漂泊
风吹你头上的霜啊
肩上的雨哟
脚下的南北东西
明天要吹你到哪里
不改心头的归期
风吹你身上的伤啊
身旁的雾哟
身后的山河万里
想起故乡那片暖阳
等着曾年少的你
我们奔波在路上
多少理想来又往
少年越过了千重浪
眼里还有万丈光
只要你别来无恙
翻山过海又何妨
想到熟悉的那张脸
归途就不再漫长
风吹你头上的霜啊
肩上的雨哟
脚下的南北东西
明天要吹你到哪里
不改心头的归期
风吹你身上的伤啊
身旁的雾哟
身后的山河万里
想起故乡那片暖阳
等着曾年少的你
漫漫前程还有多遥远的路
人山人海总有一条是归途
回头望
愿你拍去岁月落下的尘土
走多远笑容依然如故
风吹你头上的霜啊
肩上的雨哟
脚下的南北东西
明天要吹你到哪里
不改心头的归期
风吹你身上的伤啊
身旁的雾哟
身后的山河万里
想起故乡那片暖阳
等着曾年少的你`;

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;};
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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: '--bg: linear-gradient(#FFF000,#FFF000); top: 82%;',
player_css: '--ww: 240px; right: 40%; bottom: 2%;',
btn_txt: '\&#10059',
});

FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 10px; left: 20px;',
});
})();
var image = document.getElementById("testImg"),
button = document.getElementById("btn");

if (image.classList && image && button) {
button.onclick = function() {
   if (this.value == '.') {
         image.classList.remove('stop');
      this.value = '*';
   } else {
         image.classList.add('stop');
         this.value = '.';
   }
};
}

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

</script>

<style type="text/css">
#rotate-words {text-align:center;
position:absolute;z-index: 2;
max-width:800px;
left:0%;
margin:auto;
padding:20% 0;
font-size:3.5em;filter:drop-shadow(#000000 1px 1px 1px);
text-transform:uppercase;
color:#ff0000;
font-family: '华文隶书', sans-serif;
}

#rotate-words span {
display:block;
height:80px;
font-size:.7em;color:#fff000;
text-transform:lowercase;
opacity:0.8;
font-family: '华文隶书', sans-serif;
}

#rotate-words div {
position:absolute;
opacity:0;
overflow:hidden;
left:10vw;
width:80vw;
line-height:1.2em;
animation: rotate-word 36s linear 2 0s;
}

@keyframes rotate-word {0% {
   opacity: 0;
   transform: translateY(-300%);
}
8% {
   opacity: 1;
   transform: translateY(0%);
}
17% {
   opacity: 1;
   transform: translateY(0%);
}
19% {
   opacity: 0;
   transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
#rotate-words div:nth-child(2) { animation-delay: 6s}
#rotate-words div:nth-child(3) { animation-delay: 12s}
#rotate-words div:nth-child(4) { animation-delay: 18s}
#rotate-words div:nth-child(5) { animation-delay: 24s}
#rotate-words div:nth-child(6) { animation-delay: 30s}
</style>
<style type="text/css">#items {width: 100%;height: 100%;top:0px; left:0px;position: absolute; animation: slider 3s linear infinite ;}
.stop #items{animation-play-state: paused;}
@keyframes slider {0% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(241, 23, 18, 0.91) 86%); } 100% { background: radial-gradient(ellipse 100% 100% at 51% 54%, rgba(0, 153, 247, 0.07) 19%,rgba(18, 81, 241, 0.91) 86%);} }
</style>

<style>
.yh{top:0px; left:0px;width: 100%; height: 100%;position: absolute; z-index: 2; overflow:hidden;}
.yh #boom1{position: absolute;top:10%; left:10%;
opacity: 0;width: 250px;height: 250px;
animation: bloom 2s ease 1.2s infinite;
}
.stop #boom1{animation-play-state: paused;}
.yh #boom2{width: 200px;height: 200px;
position: absolute;top:15%; left:50%;
animation: bloom 2s ease 1.5s infinite;
}
.stop #boom2{animation-play-state: paused;}
.yh #boom3{width: 150px;height: 150px;
position: absolute;top:15%; left:75%;
animation: bloom 3s ease 1.4s infinite;
}
.stop #boom3{animation-play-state: paused;}
@keyframes bloom{
0% {
   transform: scale(0,0);
}
100% {
opacity: 1;
   transform: scale(1.5,1.5);filter:hue-rotate(360deg)
}
}
</style>

庶民发表于 2023-3-8 13:48

制作的真美。。。

起个网名好难 发表于 2023-3-8 13:49

本帖最后由起个网名好难于 2023-3-8 15:37 编辑

末尾的</td></tr></table>多余。
https://1824.img.pp.sohu.com.cn/images/blog/2012/12/2/20/14/e26647263_13c1f83c692g2_blog.gif

焱鑫磊 发表于 2023-3-8 15:18

起个网名好难发表于 2023-3-8 13:49
末尾的多余。

多谢！

焱鑫磊 发表于 2023-3-8 15:21

庶民发表于 2023-3-8 13:48
制作的真美。。。

学习、学习、再学习！

红影发表于 2023-3-8 17:57

这个很不错啊，直接发代码帖更好，不用上传了呢。欣赏焱鑫磊漂亮美贴{:4_187:}

樵歌发表于 2023-3-8 19:24

厉害啊，你们都会了，就剩下俺笨蛋了

焱鑫磊 发表于 2023-3-8 19:55

红影发表于 2023-3-8 17:57
这个很不错啊，直接发代码帖更好，不用上传了呢。欣赏焱鑫磊漂亮美贴

谢谢红影支持鼓励！{:4_176:}

醉美水芙蓉 发表于 2023-3-8 20:06

樵歌发表于 2023-3-8 21:20

醉美水芙蓉发表于 2023-3-8 20:06
樵歌做得也挺棒的呢！

我连抄作业都人教呢{:4_189:}

红影发表于 2023-3-8 22:56

焱鑫磊发表于 2023-3-8 19:55
谢谢红影支持鼓励！

问好焱鑫磊美女，节日快乐{:4_187:}

页: [1]

花潮论坛's Archiver

试发代码贴