论坛 › 欢乐水吧 › 痒

马黑黑 发表于 2022-10-30 07:30

痒

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/t22/webp/erhu-2.webp.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#papa::before { position: absolute; content:''; width: 100%; height: 100%; background: snow url('https://638183.freep.cn/638183/t22/webp/erhu-1.webp') no-repeat center/cover; opacity: 0; transition: all 1.5s; }
#papa:hover::before { opacity: 1; }
#mplayer { position: absolute; left: 15px; bottom: 10px; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; z-index: 3; }
#tmsg { fill: hsla(0,20%,50%,0.55); font: normal 1em sans-serif; }
#btnwrap { display: block; fill: hsla(0,20%,50%,0.55); cursor: pointer; }
#btnwrap:hover { fill: hsla(0,60%,60%,.8); }
</style>

<div id="papa">
        <svg id="mplayer" width="120" height="120" shape-rendering="geometricPrecision">
                <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
                        <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,0%,80%,0.55)" />
                        <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(0,100%,50%,0.45)" />
                </g>
                <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
                <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
                <g id="tmsg">
                        <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
                        <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
                </g>
                <g id="btnwrap">
                        <path id="btnplay" d="M 50 50,50 70,70 60 z"></path>
                        <path id="btnmid" d="M 55 50, 55 70, 60 70, 60 50, 55 50 z" fill="transparent"></path>
                        <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z"></path>
                </g>
        </svg>
</div>

<script>
(function() {
        var aud = new Audio(), cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(), };
        aud.src = 'https://music.163.com/song/media/outer/url?id=441491937.mp3';
        aud.autoplay = true;
        aud.loop = true;
        prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;
        btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
        aud.addEventListener('seeked', () => aud.play());
        mama.onclick = (e) => {var deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('play',() => mState());
        aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration + 'px';curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
        var mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
        var toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);var min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;}
        mState();
}());

</script>

相约爱晚亭 发表于 2022-10-30 07:39

鼠标移动换图，音乐与图相匹配，好帖！

马黑黑 发表于 2022-10-30 07:40

相约爱晚亭 发表于 2022-10-30 07:39
鼠标移动换图，音乐与图相匹配，好帖！

简简单单，玩玩

梦油 发表于 2022-10-30 10:37

黑黑朋友早晨好！移动鼠标、变换画面挺有意思的。

樵歌 发表于 2022-10-30 11:01

当面美女，离开魔鬼。{:4_189:}

醉美水芙蓉 发表于 2022-10-30 11:44

醉美水芙蓉 发表于 2022-10-30 11:45

马黑黑 发表于 2022-10-30 12:41

醉美水芙蓉 发表于 2022-10-30 11:45
欣赏问候黑黑老师！中午好！

中午好

马黑黑 发表于 2022-10-30 12:41

醉美水芙蓉 发表于 2022-10-30 11:44
美女与恶魔吗？

{:4_170:}

马黑黑 发表于 2022-10-30 12:41

梦油 发表于 2022-10-30 10:37
黑黑朋友早晨好！移动鼠标、变换画面挺有意思的。

{:4_181:}

马黑黑 发表于 2022-10-30 12:42

樵歌 发表于 2022-10-30 11:01
当面美女，离开魔鬼。

痒是一种境界，大约与魔鬼有关

红影 发表于 2022-10-30 19:39

这是歌曲同名乐曲吧，穿魔鬼衣服的抱的貌似不是二胡{:4_173:}

马黑黑 发表于 2022-10-30 20:12

红影 发表于 2022-10-30 19:39
这是歌曲同名乐曲吧，穿魔鬼衣服的抱的貌似不是二胡

是地地道道的二胡

小辣椒 发表于 2022-10-30 20:17

黑黑这个二胡的演奏很养耳，好听

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

这个图片可以转换效果，我刚看了代码，不懂这个。。。。

马黑黑 发表于 2022-10-30 20:29

小辣椒 发表于 2022-10-30 20:18
这个图片可以转换效果，我刚看了代码，不懂这个。。。。

转换，但不是换。原理是：

① #papa 自带底图（这个大家都懂）；

② #papa 的一个伪元素也自带底图。伪元素覆盖整个#papa盒子，但它是全透明的，鼠标滑过是变为全不透明。由于伪元素是主元素的子元素，层级比主元素高（就是浮在主元素之上），所以鼠标滑过过主元素被遮盖。

小辣椒 发表于 2022-10-30 20:31

马黑黑 发表于 2022-10-30 20:29
转换，但不是换。原理是：

① #papa 自带底图（这个大家都懂）；


谢谢黑黑~~学习了{:4_187:}

马黑黑 发表于 2022-10-30 20:34

小辣椒 发表于 2022-10-30 20:31
谢谢黑黑~~学习了

一切都在CSS里完成，我也介绍过伪元素

小辣椒 发表于 2022-10-30 20:37

马黑黑 发表于 2022-10-30 20:34
一切都在CSS里完成，我也介绍过伪元素

好的，主要我自己的想法有误{:4_170:}

马黑黑 发表于 2022-10-30 20:52

小辣椒 发表于 2022-10-30 20:37
好的，主要我自己的想法有误
好好琢磨以下代码，是它们完成了一切图片转换的功能：

<style>

#papa {
      margin: auto;
      width: 1024px;
      height: 640px;
      background: gray url('https://638183.freep.cn/638183/t22/webp/erhu-2.webp.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
}

#papa::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      background: snow url('https://638183.freep.cn/638183/t22/webp/erhu-1.webp') no-repeat center/cover;
      opacity: 0;
      transition: all 1.5s;
}

#papa:hover::before {
      opacity: 1;
}

</style>

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

查看完整版本: 痒