独处

凡哥

凡哥

帖子代码

<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>

花简静

老师这个新贴，创意十足。。。
贴子用了双背景，
其中树枝背景用了动画， -10px -5px, 形成摇曳效果。美人儿背景居中center，没有位置变动。

花简静

小播是SVG小方块，
画两种不同颜色的线，
把浅绿色的给个左右偏 移，形成动画效果。。
深绿色的做为背景，站着不动。。
最终形成这样的立体摇摆效果。

花简静

超强创意，最近都SVG动画制作，非常强悍的代码手工作品

凡哥

花简静 发表于 2024-9-25 21:24
超强创意，最近都SVG动画制作，非常强悍的代码手工作品

扬帆

动静相宜，好听好看，谢谢老师精彩分享
祝节日快乐

清梦

一个字美，太美啦！

清梦

欣赏凡哥老师带来得精彩作品！

清梦

问好凡哥老师感谢你的精彩！