痒

马黑黑

相约爱晚亭

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

马黑黑

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

简简单单，玩玩

梦油

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

樵歌

当面美女，离开魔鬼。

马黑黑

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

中午好

马黑黑

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

马黑黑

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

马黑黑

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

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

红影

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

马黑黑

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

是地地道道的二胡

小辣椒

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

小辣椒

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

马黑黑

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

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

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

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

小辣椒

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

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

谢谢黑黑~~学习了

马黑黑

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

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

小辣椒

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

好的，主要我自己的想法有误

马黑黑

小辣椒 发表于 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>