小嫦娥来祝大家人月两团园

绿叶清舟 发表于 2022-9-9 09:48

本帖最后由绿叶清舟于 2022-9-9 10:00 编辑 <br /><br /><style>
#papa { left: -250px; width: 1100px; height: 700px; background: #333 url('https://pic.imgdb.cn/item/631a00cf16f2c2beb193ef6e.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.vid { position: absolute;LEFT: -200px; width: 600px; height: 580px; object-fit: cover; opacity: 0.9; clip-path: circle(80% at bottom) ;mix-blend-mode: lighten;}
#mplayer { position: absolute; left: 820px; TOP: 60px; margin: 20px;width: 120px; height: 120px; border-radius: 50%; overflow: hidden; }
#prog, #track { stroke: url(#gradient); }

</style>

<div id="papa">
<div id="mplayer">
            <svg width="100%" height="100%" shape-rendering="geometricPrecision">
                     <g transform="rotate(-90, 60, 60)">
                           <circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.45" />
                           <circle id="prog" cx="60" cy="60" r="55" fill="none" stroke="#f6f2c3" stroke-width="10" />
                     </g>
                     <text fill="orange">

                     </text>
            </svg>
   </div>
   <svg id="lrc" width="400" height="50">
            <defs>
                     <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
                           <stop offset="0%" stop-color="#cdf5e7"/>
                           <stop offset="50%" stop-color="#d3cd69"/>
                           <stop offset="100%" stop-color="#f6f2c3"/>
                     </linearGradient>
            </defs>
            <text id="lrctxt" x="0" y="25"></text>
   </svg>

<video class="vid" style="position: relative; LEFT: 0px; TOP: 0px" src="https://img.tukuppt.com/video_show/15653652/00/20/74/5f35faa79f39e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>

</div>
</div>

<script>

let aud = new Audio();
aud.src = 'http://music.163.com/song/media/outer/url?id=407759201.mp3';
aud.autoplay = true;
aud.loop = true;
//设置圆环进度偏移
let girth = prog.getTotalLength();
prog.style.strokeDasharray = prog.style.strokeDashoffset = girth+ 'px';
//圆环鼠标经过
mplayer.onmousemove = (e) => {
   if (isHover(e.offsetX, e.offsetY))mplayer.style.cursor = 'pointer';
}
//圆环点击
mplayer.onclick = (e) => {
   if (isHover(e.offsetX, e.offsetY)) { //轨道
            let deg = Math.atan2(e.offsetY - 60, e.offsetX - 60) * 180 / Math.PI;
            deg += (e.offsetX < 60 && e.offsetY < 60) ?450 : 90;
            aud.currentTime = aud.duration * deg / 360;
   } else { //内区域
            aud.paused ? aud.play() : aud.pause();
   }
}
//监听播放进度
aud.addEventListener('timeupdate', () => {
   prog.style.strokeDashoffset = girth - girth * aud.currentTime / aud.duration + 'px';
   cur.textContent = toMin(aud.currentTime);
   dur.textContent = toMin(aud.duration);
   for(j=0; j<lrcAr.length; j++) {
            if(aud.currentTime >= lrcAr) lrctxt.textContent = lrcAr;
   }
});
//圆检测鼠标经过
let isHover = (x,y) => Math.pow(x - 60, 2) + Math.pow(y - 60, 2) >= Math.pow(45, 2);
//时间信息格式化
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>

加林森 发表于 2022-9-9 09:56

清舟的制作真漂亮，字体飞向月亮，很有创意！节日快乐！{:4_204:}

梦油发表于 2022-9-9 10:04

祝福清舟朋友阖家欢乐，幸福安康。祝各位朋友双节快乐！

梦缘发表于 2022-9-9 11:15

欣赏老师的漂亮制作，好看好听！{:4_204:}

绿叶清舟 发表于 2022-9-9 11:47

加林森发表于 2022-9-9 09:56
清舟的制作真漂亮，字体飞向月亮，很有创意！节日快乐！

谢谢队长，节日快乐

绿叶清舟 发表于 2022-9-9 11:48

梦缘发表于 2022-9-9 11:15
欣赏老师的漂亮制作，好看好听！

谢谢梦缘，节日快乐

绿叶清舟 发表于 2022-9-9 11:48

梦油发表于 2022-9-9 10:04
祝福清舟朋友阖家欢乐，幸福安康。祝各位朋友双节快乐！

谢谢梦油也祝你幸福快乐，平安如意

加林森 发表于 2022-9-9 11:49

绿叶清舟发表于 2022-9-9 11:47
谢谢队长，节日快乐

同喜同乐！{:4_191:}

马黑黑 发表于 2022-9-9 11:50

小嫦娥青春永驻

绿叶清舟 发表于 2022-9-9 11:54

马黑黑发表于 2022-9-9 11:50
小嫦娥青春永驻

播放器颜色没调好，都看不出来了

绿叶清舟 发表于 2022-9-9 11:55

加林森发表于 2022-9-9 11:49
同喜同乐！

来杯桂花酒{:4_191:}

马黑黑 发表于 2022-9-9 12:00

绿叶清舟发表于 2022-9-9 11:54
播放器颜色没调好，都看不出来了
你这边缘是月饼印子，淡淡的挺好。

做轨迹用的圆，

<circle id="track" cx="60" cy="60" r="55" fill="none" stroke="rgba(255,255,255,.5)" stroke-width="10" stroke-dasharray="2" stroke-opacity="0.45" />

红色部分是颜色，rgba体系的颜色，三个 255 表示白色，.5 表示一半的透明度。可以增大 0.5这个值，取值在 0 - 1之间，或更换三个 255 为其他组合，或干脆把 rgba颜色体系换成别的，如 stroke="red" 或 stroke=“#ff0000" 等表示方式。

加林森 发表于 2022-9-9 12:11

绿叶清舟发表于 2022-9-9 11:55
来杯桂花酒

好的好的。{:4_191:}

绿叶清舟 发表于 2022-9-9 12:22

马黑黑发表于 2022-9-9 12:00
你这边缘是月饼印子，淡淡的挺好。

做轨迹用的圆，

这里改了就变成有底色的了，本来图里的园更大些的，可改尺寸太麻烦了，得改动一大串的吧

马黑黑 发表于 2022-9-9 12:30

绿叶清舟发表于 2022-9-9 12:22
这里改了就变成有底色的了，本来图里的园更大些的，可改尺寸太麻烦了，得改动一大串的吧

该圆环大小，首先得改svg父框的尺寸，再改cx、cy和半径r值，是一大堆的，最好熟悉svg的圆的绘制语句。

其他地方的颜色（如文本等），要么改 fill 的值，要么改 stroke 的值

红影发表于 2022-9-9 13:27

这个视频融得漂亮，完全看不出了呢。播放器的设置也巧妙，虽然现在听不了歌曲，看不出效果，但是看选的位置非常巧妙。清舟真棒，这个贺帖好漂亮{:4_187:}

梦油发表于 2022-9-9 14:44

绿叶清舟发表于 2022-9-9 11:48
谢谢梦油也祝你幸福快乐，平安如意

谢谢清舟朋友。

绿叶清舟 发表于 2022-9-9 20:39

马黑黑发表于 2022-9-9 12:30
该圆环大小，首先得改svg父框的尺寸，再改cx、cy和半径r值，是一大堆的，最好熟悉svg的圆的绘制语句。

...

cx、cy和半径r值连续的这三个也改过，只是出来只有半个园了，不是简单的一起乘二这么简单的吧

绿叶清舟 发表于 2022-9-9 20:39

梦油发表于 2022-9-9 14:44
谢谢清舟朋友。

梦油客气了啊

绿叶清舟 发表于 2022-9-9 20:41

红影发表于 2022-9-9 13:27
这个视频融得漂亮，完全看不出了呢。播放器的设置也巧妙，虽然现在听不了歌曲，看不出效果，但是看选的位置 ...

纯色背景的基本都能这么玩的了

页: [1] 2

花潮论坛's Archiver

小嫦娥来祝大家人月两团园