Spring帖子代码

马黑黑 · 发表于 2024-2-14 12:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

<style>
#papa {
	margin: 100px auto;
	width: 1200px;
	height: 675px;
	background: lightgreen url('https://638183.freep.cn/638183/t24/jpg/22u.jpeg') no-repeat center/cover;
	box-shadow: 3px 3px 20px #000;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#papa > img {
	position: absolute;
	transform: translate(700px, -50px) rotate(-45deg);
	width: 80px;
	filter: hue-rotate(90deg);
	animation: fly 10s linear infinite var(--state);
}
#papa > img:nth-of-type(2) {
	filter: hue-rotate(180deg);
	animation-delay: -5s;
}
#iplay {
	position: absolute;
	bottom: 15px;
	left: calc(50% - 90px);
	width: 180px;
	height: 180px;
	border-style: dotted double ridge;
	border-color: orange red;
	border-width: 20px;
	border-radius: 50%;
	outline: 10px double olive;
	outline-offset: 2px;
	animation: flash .4s linear infinite alternate var(--state);
	cursor: pointer;
}
#iplay::before {
	position: absolute;
	content: '';
	inset: -10px;
	border-radius: 50%;
	background: url('https://638183.freep.cn/638183/small/retina.jpg') no-repeat center/cover;
	z-index: -1;
	animation: rotating 10s linear infinite var(--state);
}
@keyframes flash { to { border-color: red orange; outline-color: green; } }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes fly { to { transform: translate(-50px, 280px) rotate(0); } }
</style>

<div id="papa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2428512" autoplay loop></audio>
	<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
	<img src="https://i02piccdn.sogoucdn.com/5dc726c7d9a42fc3" alt="" />
	<div id="iplay"></div>
</div>

<script>
var mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing', mState);
aud.addEventListener('pause', mState);
iplay.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 · 发表于 2024-2-14 12:50

Spring帖子链接：

Spring - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

马黑黑 · 发表于 2024-2-14 12:54

播放控制器 #iplay （行23~行46）加了 outline 属性，双实线样式，设定间距，用伪元素加载底图。

border 设置在 Firefox 下的标签与 Chrome 有所不同，原因不明。

马黑黑 · 发表于 2024-2-14 12:58

小鸟飞行路线：使用 transform: translate(x,y) rotate(deg); 实现，没要设置路径（path）。两只小鸟均使用滤镜改变颜色，第二只小鸟执行关键帧动画属性使用了 animation-delay 属性，值为 -5，提前 5s 执行，所以它先飞出来。

马黑黑 · 发表于 2024-2-14 13:03

播放器选择器 #iplay 的伪元素使用 inset 定位，非常简洁，同时可以省却宽高设置：

inset: -10px;

上面语句等价于：

left: -10px;
top: -10px;
right: -10px;
bottom: -10px;

使用 inset，还可以设置上、右、下、左四个位置：

inset: 0 0 6px 6px;

需要注意的是，宿主元素要定位（relative或absolute）、使用 inset 属性的元素要绝对定位（absolute）