马黑黑 发表于 2025-8-21 18:08
这个做下去，你会有收获。实在还做不来，可以分析一下其它的代码，从中借鉴
好的，谢谢老师{:4_191:}
马黑黑 发表于 2025-8-21 17:59
基于背景的很多设置，transition 过渡设置没有效果，所以，这不是理想的办法。明天我做一个多背景重叠的 ...
哦哦，等着看{:4_187:}
马黑黑 发表于 2025-8-21 18:00
嗯，这是带透明的视频对元素产生的效果。非完全透明的东东很神奇的。
是啊，能造成那么奇妙的效果呢{:4_187:}
酷酷的制作，学生已交作业，请老师指正{:4_190:}
本帖最后由 杨帆 于 2025-8-21 21:04 编辑 <br /><br />马黑黑 发表于 2025-8-21 18:08
这个做下去，你会有收获。实在还做不来，可以分析一下其它的代码，从中借鉴
交作业，请马老师指正！
如何用JS取代 :hover 操作背景呢？请老师给予指导！谢谢{:4_190:}
<style>
.tz { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%);width: 800px;height: 480px;position: relative;background: url('https://638183.freep.cn/638183/small/texture/wv1.jpg') no-repeat center/cover,url('https://pic1.imgdb.cn/item/6863652d58cb8da5c881bce0.png') repeat center/30% 40%,olive;background-blend-mode: overlay, lighten;}
.tz:hover::before{ position: absolute; content: ''; inset: 0;background:url('https://638183.freep.cn/638183/small/texture/wv1.jpg') no-repeat center/cover; }
</style>
<div class="tz"></div>
杨帆 发表于 2025-8-21 21:00
.tz { margin: 30px auto; left: calc(50% - 81px); transform: translateX(-50%);width: 800px;heigh ...
大概就是酱紫，多体会
朵拉 发表于 2025-8-21 20:13
酷酷的制作，学生已交作业，请老师指正
{:4_199:}
马黑黑 发表于 2025-8-21 21:01
大概就是酱紫，多体会
好的，谢谢老师{:4_191:}
杨帆 发表于 2025-8-21 21:06
好的，谢谢老师
{:4_190:}
红影 发表于 2025-8-21 19:54
是啊，能造成那么奇妙的效果呢
其实是错觉{:4_170:}
红影 发表于 2025-8-21 19:48
哦哦，等着看
这个其实也都可以想得出来的
马黑黑 发表于 2025-8-20 18:06
这是游戏背景音乐。这类音乐通常都很好听。
原来是游戏提神用的。{:4_173:}这类音乐比较少接触 ，看来游戏里有不少好东西
马黑黑 发表于 2025-8-20 18:07
对，是这么一回事
{:4_173:}多变几回也是一样。。
马黑黑 发表于 2025-8-20 18:07
解读准确
没偏个三五个厘的。{:4_173:}
花飞飞 发表于 2025-8-21 21:17
多变几回也是一样。。
差不多的
花飞飞 发表于 2025-8-21 21:18
没偏个三五个厘的。
用纳米计吧
花飞飞 发表于 2025-8-21 21:17
原来是游戏提神用的。这类音乐比较少接触 ，看来游戏里有不少好东西
这叫烘托
本帖最后由 杨帆 于 2025-8-23 15:16 编辑 <br /><br />马黑黑 发表于 2025-8-21 21:01
大概就是酱紫，多体会
学习老师的代码完成作业,但还不是实打实的背景切换。如何用CSS变量+JS实现实打实地重设背景？请老师指导{:4_190:}
<style>
#tz { margin: 30px auto; left: calc(50% - 0px); transform: translateX(-50%);width: 800px;height: 480px;position: relative; background: var(--bg1), var(--bg2), var(--bg-color);background-blend-mode: var(--bg-blend);--state: paused;--bg1: url('https://638183.freep.cn/638183/small/texture/wv1.jpg') no-repeat center/cover;--bg2: url('https://pic1.imgdb.cn/item/6863652d58cb8da5c881bce0.png') repeat center/30% 40%;--bg-color: olive;--bg-blend: overlay, lighten;--bg-color: olive;--bg-blend: overlay, lighten;}
#btnFs { bottom: 20px; right: 20px; color: white; }
#msvg { position: absolute; left: 20px; bottom: 20px; cursor: pointer;animation: rotate 10s linear infinite var(--state);}
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .75; pointer-events: none; }
@keyframes rotate {from {transform: rotate(0);}to {transform: rotate(360deg);}}
</style>
<div id="tz">
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/04/20/05/00/video6364ffecb011e.mp4" autoplay loop muted></video>
<audio id="aud" src="https://upfile.mp3.wf/view.php/90536d0ed79b4aa3a7d6c9a483ec40ca.mp3"loop></audio>
<svg id="msvg" width="100" height="100" ><title>ALT+X</title></svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
const dr = Dr.dr(msvg);
Array.from({length: 8}).forEach((_,k) => {
dr.polygon('50 50, 40 2.5, 50 10, 60 2.5','white','firebrick', 3).transform(`rotate(${360 / 8 * k} 50 50)`);
});
aud.onplaying = aud.onpause = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
tz.style.setProperty('--bg2',aud.paused ? 'none' : '');
};
FS(tz, msvg);
</script>
马黑黑 发表于 2025-8-21 21:09
其实是错觉
是真实能看到的啊，不算错觉吧，眼见为实{:4_173:}
马黑黑 发表于 2025-8-21 21:10
这个其实也都可以想得出来的
还是看到做出来的更好{:4_173:}