【玫瑰。图】云做伴
本帖最后由 玫瑰 于 2026-6-12 18:47 编辑 <br /><br /><style>
#pa {
margin: 20px 0;
position: relative;
display: grid;
place-items: center;
left: calc(50% - var(--offsetX));
transform: translateX(-50%);
width: clamp(800px, 100vw, 1440px);
height: clamp(450px, 56.25vw, 810px);
box-sizing: border-box;
background: #ccc url('https://img.wyc520.com.cn/data/attachment/forum/202606/09/152653oqao6axggagdijfk.jpg') no-repeat center/cover;
box-shadow: 4px 6px 8px rgba(0,0,0,.6);
--state: running;
--offsetX: 81px;
}
#ma {
position: absolute;
width: 15vw;
height: 15vw;
background: tan url('https://638183.freep.cn/638183/small/envelop.jpg') no-repeat center/cover;
border-radius: 50%;
opacity: 0.7;
box-shadow: 0 0 16px rgba(0,0,0,.35);
transition: 1s;
cursor: pointer;
animation: rot 10s linear infinite var(--state);
}
#ma:hover { filter: invert(1); }
#msvg { position: absolute; pointer-events: none; }
#msvg rect { animation: move 18s var(--delay) linear infinite alternate var(--state), fade 1s var(--delay) linear infinite alternate var(--state); }
#btnFs { bottom: 20px; color: snow; }
@keyframes rot {
to { transform: rotate(360deg); }
}
@keyframes move {
to { x : 0; y: 0; }
}
@keyframes fade {
to { opacity: 0; }
}
</style>
<div id="pa"><audio style="width:5px;height:4px;" controls="controls" autoplay="autoplay" loop="loop" src="https://hxhuxi.oss-cn-beijing.aliyuncs.com/aa1/3.mp3 " type="audio/mpeg"></audio>
<div id="ma"></div>
<svg id="msvg" width="100%" height="100%" viewBox="-80 -45 160 90"></svg>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var lzCount = 60;
Array.from({length: lzCount}).forEach((_,idx) => {
var x = Math.random() * 80 * (Math.random() > 0.5 ? 1 : -1),
y = Math.random() * 45 * (Math.random() > 0.5 ? 1 : -1),
s = Math.random() + 1,
d = Math.random() * -18,
c = '#' + Math.random().toString(16).substring(2,8);
dr.rect(x,y,s,s,c,'none',0,'50%','50%').style(`--delay: ${d}s`);
});
FS(pa, ma);
</script> 倾听音乐，感受音乐。 一片云海翻腾，似是天空的无尽遐想
天边那抹云，像是大自然最温柔的问候
阳光洒落云层间，斑驳光影诉说着浪漫
云朵悠悠，给天空之诗，每一缕都是自由的笔触 5=100
100=5
{:4_187:} 这事玫瑰自己拍摄的云吧，真漂亮。
欣赏玫瑰好帖{:4_187:} 欣赏玫瑰精彩制作，问好玫瑰晚上好！ 好漂亮的蓝天白云，中间的播放器是月亮吗？制作太棒了！{:4_187:} 歌曲也好听，听歌开心。{:4_204:} 发现小播里的粒子能向外散出去，很神奇。 本帖最后由 梦风雨 于 2026-6-12 20:54 编辑
聆听音乐。 本帖最后由 梦风雨 于 2026-6-12 20:54 编辑
聆听音乐，喜欢图片。 本帖最后由 梦风雨 于 2026-6-12 20:55 编辑
再次聆听{:4_191:} 红影 发表于 2026-6-12 19:29
这事玫瑰自己拍摄的云吧，真漂亮。
欣赏玫瑰好帖
是的我拍摄美丽的云。 梦油 发表于 2026-6-12 19:58
欣赏玫瑰精彩制作，问好玫瑰晚上好！
分享聆听，晚上好。 梦江南 发表于 2026-6-12 20:09
好漂亮的蓝天白云，中间的播放器是月亮吗？制作太棒了！
马老师代码就是精彩。 梦江南 发表于 2026-6-12 20:10
歌曲也好听，听歌开心。
歌曲换了一下，分享聆听。 梦江南 发表于 2026-6-12 20:15
发现小播里的粒子能向外散出去，很神奇。
我觉得叶伴云，小播里的粒子有叶子，真好。 梦风雨 发表于 2026-6-12 20:51
聆听音乐，喜欢图片。
一起聆听音乐，都是喜欢的。
页:
[1]
2