《秋恋》（学习黑黑《Atlas》代码效果）
<style>#mydiv { margin: 60px 0 30px calc(50% - 721px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/67263552d29ded1a8cbe74dc.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
#msvg { position: absolute; left: calc(50% - 170px); top: 360px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
#msvg ellipse { transition: .5s; }
#msvg:hover ellipse {stroke-width: 3; rx: 30; }
#pic1 { position: absolute; bottom: 230px; left: 262px; width: 100px; height: 252px; transform-origin: 50%100%; opacity: 0.8; animation: ren 1.9s linear infinite alternate var(--state); }
#vid { position: absolute; left: 360px; width: 45%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; opacity: 0.7; }
#vid1 { position: absolute;width: 100%; height: 100%; top: 200px; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; opacity: 0.5; }
#fsbtn { position: absolute; left: 42%; bottom: 20px; color: goldenrod; background: transparent; padding: 4px 6px; border: 2px solid goldenrod; border-radius: 8px; user-select: none; cursor: pointer; transition: .3s; }
.wai-zmd { position: absolute; width: 300px; height: 200px; right: 160px; bottom: 80px; overflow: hidden; }
.wai-zmd div { position: absolute; top: 200px; min-height: 20px; font: normal 20px Sans-Serif; color: goldenrod; text-shadow: 1px 1px 1px rgba(0, 0, 0, .25); }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes ren { to { transform: skew(3.5deg) scale(1.02);} }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1931588198" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/18/05/5ed870ed14fc5.mp4" autoplay loop muted></video>
<video id="vid1" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d03dea88430_10s_big.mp4" autoplay loop muted></video>
<img id="pic1" src="https://pic.imgdb.cn/item/67263750d29ded1a8cc01a8f.png" alt="" />
<svg id="msvg" width="200" height="200"></svg>
<span id="fsbtn"></span>
<div class="wai-zmd">
<div id="txt-zmd">
落叶随风飘散<br><br>
吹散一地忧伤的过往<br><br>
一片叶子飘落下来<br><br>
天空悠忽昏喑<br><br>
还记得那年你的话语<br><br>
散落午后的大地<br><br>
大地它带走我们的过去<br><br>
恍惚中又把你记起<br><br>
思绪它牵牵绊绊<br><br>
剪不断我的情思缠绵<br><br>
这个秋天<br><br>
我们都是一片叶子<br><br>
飘摇起伏<br><br>
</div>
</div>
</div>
<scripttype="module">
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
sc.onload = () => {
var dr = _dr('#msvg');
dr.defs('defs');
dr.g('g1').addTo('defs');
dr.ellipse(100,100,35,60,'none','var(--color)',4).addTo('g1');
var total = 12;
Array(total).fill('').forEach( (_, k) => {
var color = `goldenrod`;
dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(40)`).style(`--color: ${color};`);
});
mydiv.onclick = () => {
mydiv.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), vid1.play()) : (aud.pause(), vid.pause(), vid1.pause());
};
};
zmd();
function zmd(){
var ziBox = document.getElementById('txt-zmd');
var w = ziBox.clientWidth / 2;
var h = ziBox.clientHeight;
var style = document.createElement('style');
var keyframes = '@keyframes fly {to { top: -' + h + 'px;}}';
style.type = 'text/css';
style.innerHTML = keyframes;
ziBox.appendChild(style);
ziBox.style.animation = 'fly 52s linear infinite var(--state)';
ziBox.style.left = 'calc(50% - ' + w + 'px)'; //元素居中
}
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script> 看到黑黑说触碰时可以rxry都改变，我试了一下互换两者的值，得到这样的效果，索性用这个做小播了。
这个就是按黑黑的椭圆实际应用的例子做的，把椭圆放里面像花瓣了{:4_173:} https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif
评分后小播和滚动文字都消失了 又碰到问题，因为这个是纯音乐，不需要歌词，我去文字仓库找了个走马灯效果的文字加上了，结果不知道怎么跟着暂停了，还有吹萨克斯的人我让他摇一下，也暂停不了@马黑黑 {:4_204:} 漂亮，知识点都可以用上，就是认真学习的结果，亲爱的你太厉害了{:4_199:} 手机回帖怕吃字，等一下电脑上来继续欣赏 人物应该是需要mydiv也被控制，才行的吧，而不仅仅是msvg被控制。这个知道点，却弄不出来。文字走马灯就不知道了。我在ziBox里加了 var(--state)，估计也是需要mydiv被控制才行吧。 这个唯一的就是加了两个视频都能控制了。还让两个视频都避开了吹萨克斯的人物，但有两个动作控制不了{:4_173:} 起个网名好难 发表于 2024-11-3 10:32
评分后小播和滚动文字都消失了
哦，这两个我都是另外加的，想多试试。看样子加出问题了{:4_187:} 小辣椒 发表于 2024-11-3 10:32
漂亮，知识点都可以用上，就是认真学习的结果，亲爱的你太厉害了
那个文字集中营一直都很喜欢，没事就想法子往帖子里加那里的效果{:4_173:} 先赞一个，吃饭了。 小辣椒 发表于 2024-11-3 10:33
手机回帖怕吃字，等一下电脑上来继续欣赏
谢谢亲爱的。正好秋天了，做个这样的帖子假装一把悲秋{:4_173:} 梦江南 发表于 2024-11-3 10:40
先赞一个，吃饭了。
谢谢江南，祝好胃口{:4_187:} 萨克斯吹出了满目的秋凉。 梦油 发表于 2024-11-3 11:02
萨克斯吹出了满目的秋凉。
梦油这回复很文艺范，正是帖子想表达的呢。{:4_187:} 小播svg 有点击交互：
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), vid1.play()) : (aud.pause(), vid.pause(), vid1.pause());
};
如果其他与svg同级的元素也用到 --state 这个CSS变量，那么，对这个变量管理的委托权就不能是 msvg，因为 msvg 只会将变量值传递给其子元素而非兄弟元素，你需要将对 --state 的管权交给帖子容器。
这类问题其实反映出来的就是逻辑问题，具体说就是，对具有穿透力信息传递的元素，谁能管谁、谁不能管谁的逻辑关系要弄清楚。继承性是父传子，CSS的法律不可能承认兄弟间的相互继承权，因为酱紫会乱套。
非常漂亮的画面，还有往上移动的文字。人物和整个色调溶合还有播放器。{:4_187:} 红影 发表于 2024-11-3 10:32
又碰到问题，因为这个是纯音乐，不需要歌词，我去文字仓库找了个走马灯效果的文字加上了，结果不知道怎么跟 ...
文字滚动就用marquee 标签，它本身就有start和stop方法。
png图片也可以用控制gif图片同样的方法去控制。 红影 发表于 2024-11-3 11:04
梦油这回复很文艺范，正是帖子想表达的呢。
我年轻时也喜欢吹萨克斯。 金秋真美，欣赏恩师佳作。{:4_191:}