CSS小温泉

花简静

凡哥 发表于 2024-9-7 18:49
图标没有平躺，需要躺平的话，给 .infinity 选择器加个旋转语句，-45deg，并将用于观察的灰色边框去掉。 ...

不同的裁剪有不同的形状，
旋转点不同，
也能出现不同的叠法。
我继续尝试中

凡哥

测试 helight_01

帖子代码

<style>
#tz { margin: 30px 0 30px calc(50% - 730px); width: 1280px; height: 720px; background: url('https://638183.freep.cn/638183/t24/webp2/uuvi.webp') no-repeat 0 0 / 612px 408px, url('https://638183.freep.cn/638183/t24/4/gg.jpg') no-repeat center/cover; box-shadow: 0 0 4px #111; z-index: 1; animation: bgmove 3s linear infinite alternate var(--state); position: relative; }
#player { position: absolute; right: 10px; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
@keyframes bgmove { to { background-position: -10px -5px, center }; }
</style>

<div id="tz">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=498210" autoplay loop></audio>
	<svg id="player" width="400" height="40" viewBox="-50 -5 100 10" style="">
		<g style="fill="none" stroke="green" stroke-width="10" stroke-dasharray="4" >
			<line x1="-50" y1="0" x2="50" y2="0"></line>
			<line x1="-50" y1="0" x2="50" y2="0" stroke="lightgreen">
				<animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
			</line>
		</g>
	</svg>
</div>

<script>
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), player.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), player.unpauseAnimations());
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

凡哥

不齐整的原因：word-break 的值 break-all 和 break-word 前后不一致

凡哥

解决方案：取出添加div，直接使用 class="hE“ 的父div做代码显示框，p标签就写在它上面，令pre的display属性为 none