寒冬残荷 发表于 2022-10-14 11:58

《谁在窗外流泪》--学习马老师课程作业

<style>
.bk1 {position:relative; width:1130px; height:750px; top:20px;left:-250px;}
.bk2 {background-color:#cccccc;position:relative;left:42px;width:1080px;height:675px;overflow:hidden;box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000;}
.bk3 {position:absolute; left:50px;top:40px;opacity: .5; width: 1200px; height: 700px; background: gray url('https://pic1.imgdb.cn/item/63480f6c16f2c2beb12107df.gif') no-repeat center/cover; }
#bk4 {position:absolute; width:100%; height:120%; background: url('https://pic1.imgdb.cn/item/633c48d916f2c2beb1705ce3.png') no-repeat center/cover;opacity: 1; }
#bk5 {position:relative; width: 600px; height: 697px;left:-130px; top: 40px;        transform:rotateY(-30deg); background:url('https://pic1.imgdb.cn/item/63480b4916f2c2beb114c016.png') no-repeat center/cover; opacity: 1; }
#mplayer { transform: rotate(-45deg); }
#mplayer circle, #mplayer line, #player path {opacity: 0.5; }
#tmsg { font: normal 1em sans-serif; fill: #ff0000; }
#lrc { --motion: cover1; --tt: 2s; --state: running; font: bold 3.4em sans-serif; color: hsl(20,10%,80%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(20,100%,0%,.95)); filter:drop-shadow(1px 0 0 #ffffff ) drop-shadow(0 1px 0 #ffffff) drop-shadow(-1px 0 0 #ffffff) drop-shadow(0 -1px 0 #ffffff);}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.95),hsla(0,100%,50%,.75)); 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%; } }
#svg1 { position: absolute; font: bold 7em sans-serif; }
.text { fill: none; stroke-width: 3; stroke-dasharray: 0 300; stroke-dashoffset: 0; }
.text:nth-child(3n + 1) { stroke: #e1e100; animation: stroke1 30s ease-in-out infinite alternate; }
@keyframes stroke1 { to { stroke-dashoffset: 1000; stroke-dasharray: 80 160; } }
.text:nth-child(3n + 2) { stroke: red; animation: stroke2 30s ease-in-out infinite alternate; }
@keyframes stroke2 { to { stroke-dashoffset: 1080; stroke-dasharray: 80 160; } }
.text:nth-child(3n + 3) { stroke: #00ff00; animation: stroke3 30s ease-in-out infinite alternate; }
@keyframes stroke3 { to { stroke-dashoffset: 1160; stroke-dasharray: 80 160; } }
.text:hover { fill: teal; opacity: .45; }
</style>

<div class="bk1">
<div class="bk2">
<div class="bk3"></div>
<div id="bk4">
<div id="bk5"></div></div>
<svg id="svg1" width="1024" height="640">
        <symbol id="s-text"><text text-anchor="middle" x="50%" y="20%" dy=".35em">谁在窗外流泪</text></symbol>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>
                <use xlink:href="#s-text" class="text"></use>
        </svg>
</div>
<div style="position: relative; width:800px; top:-90px;left:200px; border:0px #FF4A20 solid; ">
<div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
<div style="position: absolute; width:90px; height:0px; top:-10px; left:850px; padding: 4px; transform: rotate(45deg); border: 0px solid #ffcc00; box-shadow: 2px 2px 8px #000;border-radius:50%;">
<svg id="mplayer" viewBox="0 0 100 100" width="100" height="100">
<g id="tmsg">
<text x="52%" y="0"><textPath id="curMsg" xlink:href="#curPath" text-anchor="middle" dominant-baseline="text-after-edge">00:00</textPath></text>
<text x="60%" y="0"><textPath id="durMsg" xlink:href="#durPath" text-anchor="middle" dominant-baseline="text-before-edge">00:00</textPath></text>
</g>
<circle id="btnplay" cx="50" cy="50" r="35" fill="transparent" style="cursor: pointer" />
<circle id="track" cx="50" cy="50" r="45" fill="none" stroke="DarkSalmon" stroke-width="8" style="cursor: pointer" />
<circle cx="50" cy="50" r="6" fill="DarkSalmon" />
<line id="hand" x1="50" y1="50" x2="50" y2="20" stroke="DarkSalmon" stroke-width="2" marker-end="url(#arrow)" />
<marker id="arrow" markerHeight="10" markerWidth="10" orient="auto" refx="3" refy="6.5" >
<path d="M3,3 L3,10 L8,6 L3,3" fill="DarkSalmon" />
</marker>
<path id="curPath" d="M 10 60 Q 50 0 90 60" fill="none" stroke="none"/>
<path id="durPath" d="M 0 38 Q 50 100 100 38" fill="none" stroke="none"/>
</svg>
</div></div>
</div>

<script type="text/javascript">
let mKey = 0, mSeek = false, mFlag = true, aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), };
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.src = 'https://www.kumeiwp.com/sub/filestores/2022/10/13/a47969339453e12c7fbeee2f09858998.mp3';
aud.autoplay = true;
aud.loop = true;
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => { let progress = aud.currentTime * 360 / aud.duration; hand.setAttribute('transform', 'rotate(' + progress +', 50, 50)'); curMsg.textContent = toMin(aud.currentTime); durMsg.textContent = toMin(aud.duration); for(j = 0; j < lrcAr.length; j ++) { if(aud.currentTime >= lrcAr) { if(mKey === j) showLrc(lrcAr); else continue; } } });
track.onclick = (e) => {let angle = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;angle+= (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * angle / 360;}
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
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 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 showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
</script>

寒冬残荷 发表于 2022-10-14 12:00

本帖最后由 寒冬残荷 于 2022-10-14 13:40 编辑

窗口图片是红影的，谢谢红影！另外两个图片抠图没有微处理，老眼昏花，做不了细活。{:5_117:}

马黑黑 发表于 2022-10-14 12:50

总体方面把握非常到位，好制作。赞。

寒冬残荷 发表于 2022-10-14 13:41

马黑黑 发表于 2022-10-14 12:50
总体方面把握非常到位，好制作。赞。

谢谢老师给我批改作业并加分鼓励！{:5_117:}

相约爱晚亭 发表于 2022-10-14 14:02

欣赏好帖！

红影 发表于 2022-10-14 15:14

寒冬残荷 发表于 2022-10-14 12:00
窗口图片是红影的，谢谢红影！另外两个图片抠图没有微处理，老眼昏花，做不了细活。

我自己都想不起来了，看起来对图片做额外的处理，就会得到完全不同的感受呢{:4_187:}

红影 发表于 2022-10-14 15:15

这个SVG的标题字特别漂亮，寒冬残荷好棒，作业完成得非常完美{:4_199:}

红影 发表于 2022-10-14 15:16

歌词同步也特别好，那个播放器按钮是进度不可调么？记得黑黑也做过进度可调的。{:4_204:}

马黑黑 发表于 2022-10-14 19:10

寒冬残荷 发表于 2022-10-14 13:41
谢谢老师给我批改作业并加分鼓励！

{:5_108:}

醉美水芙蓉 发表于 2022-10-14 19:48

起个网名好难 发表于 2022-10-14 22:19

欣赏、学习

深秋红枫 发表于 2022-10-15 05:17

欣赏,学习，赞一个！

寒冬残荷 发表于 2022-10-15 10:06

红影 发表于 2022-10-14 15:15
这个SVG的标题字特别漂亮，寒冬残荷好棒，作业完成得非常完美

谢谢红管的支持与鼓励！

寒冬残荷 发表于 2022-10-15 10:14

本帖最后由 寒冬残荷 于 2022-10-15 10:29 编辑

红影 发表于 2022-10-14 15:16
歌词同步也特别好，那个播放器按钮是进度不可调么？记得黑黑也做过进度可调的。
可调。点按钮圆圈的圆环上是调音乐进度。点击按钮圆圈内是播放/暂停。

寒冬残荷 发表于 2022-10-15 10:14

醉美水芙蓉 发表于 2022-10-14 19:48
老师做得真漂亮！

谢谢临贴鼓励！

寒冬残荷 发表于 2022-10-15 10:15

起个网名好难 发表于 2022-10-14 22:19
欣赏、学习

谢谢老师的支持与鼓励！

寒冬残荷 发表于 2022-10-15 10:15

深秋红枫 发表于 2022-10-15 05:17
欣赏,学习，赞一个！

谢谢老师的支持与鼓励！

红影 发表于 2022-10-15 12:06

寒冬残荷 发表于 2022-10-15 10:14
谢谢临贴鼓励！

是的，可调的，是我自己弄错了，评分后忘记刷新了{:4_173:}

红影 发表于 2022-10-15 12:08

寒冬残荷 发表于 2022-10-15 10:06
谢谢红管的支持与鼓励！

做的很漂亮，再赏好帖{:4_187:}

小辣椒 发表于 2022-10-18 20:28

问好寒冬残荷，欣赏精彩的制作{:4_199:}
页: [1] 2
查看完整版本: 《谁在窗外流泪》--学习马老师课程作业