强制两端对齐还是挺有用的。比方说，我会用两个伪元素放置播放器时间信息，如果使用两端对齐，一个就够了 ...
每种都有用处……老师会的多它的用得也多。。。{:4_199:} 花飞飞 发表于 2023-7-30 19:45
每种都有用处……老师会的多它的用得也多。。。
物尽其用 马黑黑 发表于 2023-7-30 21:13
物尽其用
人尽其才 本帖最后由 马黑黑 于 2023-8-21 14:20 编辑 <br /><br /><style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp1/lipm.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; display: grid; place-items: center; z-index: 1; --state: running; }
.leaf { position: absolute; font-size: 30px; top: -20%; color: green; opacity: .64; animation: drop var(--duration) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 105%; transform: rotate(1turn); } }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1415245956" autoplay loop></audio>
<script>
let leaves = ['🍁','🍂','☘','🍀','🌿','🍃'];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/plater_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
HCPlayer({
papa: '#papa',
lrcAr: [ ],
player_css: `
right: -4px;
bottom: 10px;
color: white;
--color1: snow;
--color2: black;
`,
lrc_css: `
bottom: 15px;
--color: linear-gradient(rgba(216,204,184,.3),rgba(216,204,184,.7));
--bg: linear-gradient(rgba(97,77,48,.25), rgba(97,77,48,.6));
`,
});
}
Array.from({length: 30}).forEach((item, key) => {
item = document.createElement('span');
item.className = 'leaf';
item.innerHTML = leaves;
item.style.cssText += `
left: ${Math.random() * 100}%;
font-size: ${30 + Math.floor(Math.random() * 30)}px;
--duration: ${10 + Math.random() * 10}s;
--delay: ${10 - Math.random() * 25}s;
`;
papa.appendChild(item);
});
</script>
页:
1
[2]