永远的长安
本帖最后由 马黑黑 于 2024-6-26 12:18 编辑 <br /><br /><style>#tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1280px; height: 624px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/ihan.jpg') no-repeat center/cover; border: 10px inset tan; z-index: 1; position: relative; --distance: 1280px; }
li-zi { position: absolute; top: -100px; border-radius: 50%; animation: fly 20s cubic-bezier(0.09, -0.12, 0.92, 0.47) infinite var(--state); }
#player { position: absolute; left: calc(50% - 60px); top: 30px; width: 120px; height: 120px; cursor: pointer; filter: hue-rotate(60deg); transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(0); }
@keyframes fly { to { transform: rotate(-90deg) translateY(var(--distance)); } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=75388" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/small/hxxb.webp" />
</div>
<script>
new Array(total = 80).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.innerHTML = ['🌸','💮','🌺'];
i.style.cssText += `
left: ${Math.floor(20 * Math.random()) - 10}%;
animation-delay: -${Math.random() * 20}s;
`;
tz.prepend(i);
});
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'top: 160px; left: 50%; transform: translate(-50%); --color: snow; --fsBg: rgba(224,144,113,.7);',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
</script>
本帖最后由 马黑黑 于 2024-6-26 12:20 编辑
帖子代码
<style>
#tz { margin: 30px 0; left: 50%; transform: translateX(calc(-50% - 81px)); width: 1280px; height: 624px; overflow: hidden; background: lightblue url('https://638183.freep.cn/638183/t24/3/ihan.jpg') no-repeat center/cover; border: 10px inset tan; z-index: 1; position: relative; --distance: 1280px; }
li-zi { position: absolute; top: -100px; border-radius: 50%; animation: fly 20s cubic-bezier(0.09, -0.12, 0.92, 0.47) infinite var(--state); }
#player { position: absolute; left: calc(50% - 60px); top: 30px; width: 120px; height: 120px; cursor: pointer; filter: hue-rotate(60deg); transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: hue-rotate(0); }
@keyframes fly { to { transform: rotate(-90deg) translateY(var(--distance)); } }
@keyframes rot { to { transform: rotate(-1turn); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=75388" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://638183.freep.cn/638183/small/hxxb.webp" />
</div>
<script>
new Array(total = 80).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.innerHTML = ['🌸','💮','🌺'];
i.style.cssText += `
left: ${Math.floor(20 * Math.random()) - 10}%;
animation-delay: -${Math.random() * 20}s;
`;
tz.prepend(i);
});
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'top: 160px; left: 50%; transform: translate(-50%); --color: snow; --fsBg: rgba(224,144,113,.7);',
});
window.onresize = () => tz.style.setProperty('--distance', tz.offsetWidth + 'px');
</script>
（一）emoji图标文本在花潮论坛不能直接使用，原因是论坛采用 gbk 编码而非UTF-8，需要将emoji文本字符转换成 html 实体字符（代码第 18 行）。需要转换的可以考虑：
http://mhh.52qingyin.cn/art/show.php?st=5&sd=5&art=mahei_1706085226
（二）本帖考虑到普通显示模式和全屏显示模式的切换会影响动画的执行效果，因此加入 window.onresize 监听事件（代码第 39 行），浏览器视窗的尺寸变更均重新设计粒子的移动距离。 好看，学习下~~{:4_178:} 欣赏老师又一佳作！问好！{:4_199:} 马黑黑 发表于 2024-6-26 07:57
（一）emoji图标文本在花潮论坛不能直接使用，原因是论坛采用 gbk 编码而非UTF-8，需要将emoji文本字符转换 ...
谢谢老师的耐心！{:4_187:} 漂亮的emoji图标小花朵，大气而热闹的古长安，尤其全屏时候，把人带入了一个奇妙的世界{:4_199:} 小播触碰的颜色变化也特别好看，都是喜欢的颜色。
还有 window.onresize 监听事件呢，以前以为只有设置百分比才行，原来这样也可以{:4_187:} transform: translateX(calc(-50% - 1px)); 这个忘记变成81吧{:4_173:}
这个全屏原来还是打包好的呢{:4_199:} 又想举手提问了，是什么啊{:4_173:}我记得求余数的说法，这个是固定的3个，为什么还求啊。
本帖最后由 马黑黑 于 2024-6-26 12:21 编辑
红影 发表于 2024-6-26 11:09
又想举手提问了，是什么啊我记得求余数的说法，这个是固定的3个，为什么还求啊。
这是给粒子加文本机制。文本有一个数组，就三朵花，在这里遍历粒子时给粒子加文本：
k % 3 这里是数组下标的计算，很简单：k 是粒子索引，数组有3个，索引取3的余数会在 0~2 之间循环；然后用这个余数作为下标去取花朵数组的内容——不同次序的粒子，它们的花朵是不一样的。 红影 发表于 2024-6-26 11:06
transform: translateX(calc(-50% - 1px)); 这个忘记变成81吧
这个全屏原来还是打包好的呢{:4_1 ...
这几天不是在讨论这个问题吗？这是故意的：我就是想看看有谁会关心到帖子的水平居中问题。 红影 发表于 2024-6-26 11:04
小播触碰的颜色变化也特别好看，都是喜欢的颜色。
还有 window.onresize 监听事件呢，以前以为只有设置百 ...
有一些属性不好设置百分比，比如 transform: translate(参数)，若参数使用百分比，则基于运动的元素而不是它的场景（父元素），所以只能用px做单位。视口的改变，定死的移动距离应跟着改变，所以用了 window.onrisize 事件来处理，这是最简单、最经济的处理机制。 红影 发表于 2024-6-26 11:03
漂亮的emoji图标小花朵，大气而热闹的古长安，尤其全屏时候，把人带入了一个奇妙的世界
感谢支持 朵拉 发表于 2024-6-26 09:55
好看，学习下~~
{:4_190:} 梦江南 发表于 2024-6-26 10:05
欣赏老师又一佳作！问好！
{:4_190:} 梦江南 发表于 2024-6-26 10:06
谢谢老师的耐心！
{:4_190:} 马黑黑 发表于 2024-6-26 07:57
（一）emoji图标文本在花潮论坛不能直接使用，原因是论坛采用 gbk 编码而非UTF-8，需要将emoji文本字符转换 ...
看到符号的第 一感觉是，发到论坛要转换的，哎呀，方法是啥，好象忘了。。。{:4_170:}
老师这里给了转换地址~~原来这个小工具早就备好了。 马黑黑 发表于 2024-6-26 07:57
（一）emoji图标文本在花潮论坛不能直接使用，原因是论坛采用 gbk 编码而非UTF-8，需要将emoji文本字符转换 ...
本帖考虑到普通显示模式和全屏显示模式的切换会影响动画的执行效果，因此加入 window.onresize 监听事件（代码第 39 行），浏览器视窗的尺寸变更均重新设计粒子的移动距离。
感觉这个十分先进啊。。对比一下，都很漂亮。。
江湖里没有这句好象影响不大
这个贴子色调古典高级，相当耐看。。
一副朝气蓬勃的盛世景象。。。
音乐恢弘大气，好听{:4_199:}。。