探触寂静 TO 马黑黑
<style>#papa { margin: 120px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: #0b1a3a url('https://pic.imgdb.cn/item/63987064b1fccdcd369195b8.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
.vid { position: absolute; width: 1024px; height: 640px; object-fit: cover; opacity: .88; clip-path: circle(78% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="papa"><video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a.mp4" autoplay="autoplay" loop="loop" muted="muted"></video></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=5256016.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) { let defaults = { lrcAr: [], player_css: '', lrc_css: '', playerCode: ` <style> #mplayer { --color1: snow; --color2: navy; position: absolute; left: calc(50% - 60px); bottom: 10px; width: 164px; height: 66px; border-radius: 50%; background: repeating-conic-gradient(var(--color1) 0deg, var(--color2) 0.18deg); border: 6px solid var(--color1); cursor: pointer; display: grid; place-items: center center; box-shadow: 1px 2px 4px #000; } #mplayer::before { position: absolute; content: attr(data-tt); color: var(--color2); text-shadow: 1px 1px 2px var(--color1); opacity: .95; } #lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(60, 100%, 50%, .65), hsla(120, 100%, 17%, .75)); position: absolute; top: 40px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); } #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="mplayer" data-tt="0"></div> <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`, }; let playCode = (user_config) => { let data = Object.assign({}, defaults, user_config); papa.innerHTML += data.playerCode; mplayer.style.cssText += data.player_css; mplayer.onclick = () => aud.paused ? aud.play() : aud.pause(); aud.loop = false; let mKey = 0, coe = 0, mFlag = true;aud.addEventListener('pause', () => mState()); aud.addEventListener('playing', () => mState()); aud.addEventListener('ended', () => { mKey = 0; aud.play(); }); aud.addEventListener('timeupdate', () => { mplayer.dataset.tt = '-' + toMin(aud.duration - aud.currentTime); coe = Math.random() * 2.5; update(); for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime >= data.lrcAr) { cKey = j; if (mKey === j) showLrc(data.lrcAr); else continue; } } });let update = () => { let step = coe + Math.random() * coe; mplayer.style.background = `repeating-conic-gradient(var(--color1) 0deg, var(--color2) ${step}deg)`; };let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : lrc.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 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);
let lrcAr = [];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '',
player_css: '--color1: darkgreen; --color2: snow; left:660px; bottom:365px;',
});
})();
</script> 学习一下马老师的假频谱响应器{:5_106:} 用假频谱叠一块假鹅卵石，没用鹅卵石的颜色，怕混到一起看不出来 谢谢马老师的代码，这频谱不假，寂静也不假，学习更不假{:5_106:} 好像这个效果还没人做，赶紧抢个先{:5_106:} 自然天成 马黑黑 发表于 2022-12-13 21:45
自然天成
这个简单又好看，马老师很有创意{:5_116:} 很清净的音乐和画面。欣赏好帖{:4_187:} 侃大山 发表于 2022-12-13 22:06
这个简单又好看，马老师很有创意
你还可以进一步完善。既然使用了椭圆，还可以用 transform: skew(xxdeg)弄一下 马黑黑 发表于 2022-12-13 23:43
你还可以进一步完善。既然使用了椭圆，还可以用 transform: skew(xxdeg)弄一下
没弄过，不知道会怎样{:5_106:} 侃大山 发表于 2022-12-15 16:28
没弄过，不知道会怎样
你先单独测试一下 transform: skew(10deg) 之类的，看看效果，调整 侃大山 发表于 2022-12-13 21:39
学习一下马老师的假频谱响应器
拍黑总马屁{:4_170:} 马黑黑 发表于 2022-12-13 21:45
自然天成
黑总收礼开心，这个人原来是老手，上来就会{:4_199:} 辫子哥哥 发表于 2022-12-15 20:01
黑总收礼开心，这个人原来是老手，上来就会
{:4_181:} 真漂亮的图，好听的曲子，欣赏问好！{:4_204:} 辫子哥哥 发表于 2022-12-15 20:00
拍黑总马屁
拍马屁有好处，可以多学点{:5_106:} 梦缘 发表于 2022-12-16 15:43
真漂亮的图，好听的曲子，欣赏问好！
谢谢鼓励 马黑黑 发表于 2022-12-15 17:44
你先单独测试一下 transform: skew(10deg) 之类的，看看效果，调整
我只会用你原来的，不会用没见过的{:5_106:} 侃大山 发表于 2022-12-20 21:23
我只会用你原来的，不会用没见过的
慢慢来 马黑黑 发表于 2022-12-20 21:39
慢慢来
我多看看再说
页:
[1]
2