印度歌曲 TO南无月 （学习黑黑大地效果）
<style>#waikuang {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan;
box-shadow: 0 0 10px gray;
position: relative;
overflow: hidden;
--state: paused;
}
.vid { position: absolute; width: 1024px; height: 700px; top:-60px; object-fit: cover; opacity: 1; }
#mypic { position: absolute; right: 20px;bottom: 10px; width: 360px; height: 340px; display: none; }
#canv { display: block; position: absolute; right: 20px;bottom: 10px; }
</style>
<div id="waikuang">
<video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56bdddbca56_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<canvas id="canv" width="360" height="340"></canvas>
<img id="mypic" src="https://pic.imgdb.cn/item/6483ca151ddac507cc09118e.gif" alt="" />
<css-doodle grid="1x6" id="papa">
:doodle {
@size: 1024px 640px;
z-index: 10;
--ww: 300px; /* 进度条总长 */
--prog: 0; /* 进度 */
--tt1: '00:00'; /* 当前播放时间 */
--tt2: '00:00'; /* 音乐时长 */
--xplace: 50%; /* 播放器水平定位 */
--yplace: 98%; /* 播放器垂直定位 */
--color: snow;
--state: paused; /* 关键帧运行状态 */
}
/* 单元格1 ：进度条 */
@nth(1) {
@size: var(--ww) 2px;
@place: var(--xplace) var(--yplace);
background: silver;
:before, :after { content: ''; }
:before {
position: absolute;
left: 0;
width: var(--prog);
height: 100%;
background: var(--color);
}
:after {
width: 100%;
height: 10px;
cursor: pointer;
}
}
/* 单元格2 ：播放时间信息 */
@nth(2) {
@size: var(--ww) 20px;
@place: var(--xplace) calc(var(--yplace) - 20px);
:before, :after{
position: absolute;
width: 100%;
height: 100%;
color: var(--color);
}
:before { content: var(--tt1); }
:after { content: var(--tt2); text-align: right; }
}
/* 单元格3 ：播放按钮 */
@nth(3) {
@size: 80px;
@place: var(--xplace) calc(var(--yplace) - 46px);
cursor: pointer;
animation: rot 6s infinite linear var(--state);
:before {
content: '';
@size: inherit;
@shape: star;
background: var(--color);
}
}
@match(i ≥ 4) {
@size: 60px 120px;
@place: 100px 500px;
background: url('https://pic.imgdb.cn/item/6483cb431ddac507cc0a0b8b.gif');
offset-path: path('M100 500 Q400 -400 1000 -200');
offset-distance: 0%;
offset-rotate: 0deg;
animation: fly 10s calc(@r(1,10) * -1s) infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes fly { to { offset-distance: 100%; }}
</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28725872" autoplay="autoplay" loop="loop"></audio>
<script>
(function(){
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let vid = document.querySelector('.vid');
let context = canv.getContext('2d');
let oImg = new Image();
oImg.src = mypic.src;
oImg.onload = () => context.drawImage(oImg,0,0,canv.width,canv.height);
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 ? (canv.style.display = 'block', mypic.style.display = 'none',papa.style.setProperty('--state', 'paused'), vid.pause()) : (canv.style.display = 'none', mypic.style.display = 'block',papa.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('timeupdate', () => {
papa.style.setProperty('--prog', 100*aud.currentTime/aud.duration + '%');
papa.style.setProperty('--tt1', `'${toMin(aud.currentTime)}'`);
papa.style.setProperty('--tt2', `'${toMin(aud.duration)}'`);
});
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
window.onload = () => {
let btns = papa.shadowRoot.querySelectorAll('cell');
let ww = parseInt(window.getComputedStyle(papa).getPropertyValue('--ww'));
btns.onclick = () => aud.paused ? aud.play() : aud.pause();
btns.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / ww;
}
})();
</script> @南无月谢谢月儿分享的动图抠图，用你分享的网站去弄了个跳舞的印度美女{:4_187:} @马黑黑谢谢黑黑的代码，学了大地的代码，还有椭圆文字那帖里的让路径上图图不转向{:4_173:}本来想弄个路径让那些小人围绕美女，感觉旁边太空，索性让那些小人绕过播放器了。
本来还想学个黑黑前面教的canvas 方法让跳舞的美女也能跟着暂停，试了半天不行，就算了{:4_173:}可以了， 美女也可以暂停了{:4_205:} 不熟悉，折腾够呛，午睡去，自己补偿一下：）
唷，星光闪闪，说有美女，便换了极速模式 上海朝阳 发表于 2023-6-10 16:06
唷，星光闪闪，说有美女，便换了极速模式
那美女暂停的时候样子很呆，没办法只能取第一个镜头{:4_173:} 欣赏点赞！ 醉美水芙蓉 发表于 2023-6-10 16:43
欣赏红影美女美贴！
感谢水芙蓉美女鼓励。{:4_204:} 岩新新 发表于 2023-6-10 16:54
欣赏点赞！
谢谢新新鼓励{:4_187:} 弄得好生热闹，最好让阿三妹纸跳个肚皮舞岂不更好。{:4_170:} 很是阿三风情，还是很好听的。{:4_187:} 印度歌曲很有味～ 我很喜欢印度歌曲，比如：大篷车等。
可惜，你这么好的帖子，俺没分了。 红影 发表于 2023-6-10 13:54
@南无月谢谢月儿分享的动图抠图，用你分享的网站去弄了个跳舞的印度美女
上来就听到影子的呼唤，真是意外。
贴子一如既往的技术含量超强，各种效果熟练使用， 代码使用极其熟练。
感谢影子的关注，欣赏影子好贴！{:4_187:}{:4_204:} 欣赏学习！{:4_187:} 很精巧的设计 好亮眼的画面，那个五星播放器好漂亮呀，炫目的小人儿好有趣{:4_187:} 有点心疼那印度美人儿，会不会累坏了{:4_173:} 问好无月，收礼开心{:4_185:}