Spring帖子代码
<style>.mum ol { padding: 10px 50px; background: #eee; color: navy; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; }
.mum ol li { white-space: pre-wrap; word-wrap: break-word; tab-size: 4; }
</style>
<div class="mum"><pre>
<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></pre>
</div>
<script>
var mums = document.querySelectorAll('.mum');
mums.forEach(mum => {
var pre = document.querySelector('pre');
var innerConts = pre.innerHTML.replaceAll(/(^.+$)/gm,'<li>$1</li>');
mum.innerHTML = '<ol>' + innerConts + '</ol>';
});
</script>
Spring帖子链接：
Spring - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com)
播放控制器 #iplay （行23~行46）加了 outline 属性，双实线样式，设定间距，用伪元素加载底图。
border 设置在 Firefox 下的标签与 Chrome 有所不同，原因不明。 小鸟飞行路线：使用 transform: translate(x,y) rotate(deg); 实现，没要设置路径（path）。两只小鸟均使用滤镜改变颜色，第二只小鸟执行关键帧动画属性 使用了 animation-delay 属性，值为 -5，提前 5s 执行，所以它先飞出来。 播放器选择器 #iplay 的伪元素使用 inset 定位，非常简洁，同时可以省却宽高设置：
inset: -10px;
上面语句等价于：
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
使用 inset，还可以设置上、右、下、左四个位置：
inset: 0 0 6px 6px;
需要注意的是，宿主元素要定位（relative或absolute）、使用 inset 属性的元素要绝对定位（absolute） 马黑黑 发表于 2024-2-14 12:54
播放控制器 #iplay （行23~行46）加了 outline 属性，双实线样式，设定间距，用伪元素加载底图。
border ...
黑黑还比较过Firefox 和 Chrome的效果啊，我没装Firefox ，不知道那里的样子{:4_173:} 马黑黑 发表于 2024-2-14 12:58
小鸟飞行路线：使用 transform: translate(x,y) rotate(deg); 实现，没要设置路径（path）。两只小鸟均使用 ...
原来是第二只先飞，先飞的都是笨鸟{:4_170:} 马黑黑 发表于 2024-2-14 13:03
播放器选择器 #iplay 的伪元素使用 inset 定位，非常简洁，同时可以省却宽高设置：
inset: -10px;
“使用 inset 属性的元素要绝对定位（absolute）”
嗯嗯，记下了{:4_187:} 谢谢黑黑的详细教学，这个帖子里的窍坎还挺多的呢{:4_187:} 红影 发表于 2024-2-14 16:48
谢谢黑黑的详细教学，这个帖子里的窍坎还挺多的呢
有一点点吧，不多 红影 发表于 2024-2-14 16:45
黑黑还比较过Firefox 和 Chrome的效果啊，我没装Firefox ，不知道那里的样子
Firefox现在小众化了，市场占有率5%左右 红影 发表于 2024-2-14 16:45
原来是第二只先飞，先飞的都是笨鸟
有道理 马黑黑 发表于 2024-2-14 17:37
有一点点吧，不多
这些都是值得学习的{:4_199:} 马黑黑 发表于 2024-2-14 17:38
Firefox现在小众化了，市场占有率5%左右
那么低啊，没想到。 马黑黑 发表于 2024-2-14 17:38
有道理
两只鸟儿的间隔时间正好呢{:4_187:} 红影 发表于 2024-2-14 19:24
两只鸟儿的间隔时间正好呢
当然 红影 发表于 2024-2-14 19:23
那么低啊，没想到。
它一直也是不温不火的 红影 发表于 2024-2-14 19:23
这些都是值得学习的
{:4_190:} 马黑黑 发表于 2024-2-14 20:07
当然
飞鸟增加了帖子的灵动，真好{:4_187:} 马黑黑 发表于 2024-2-14 20:08
它一直也是不温不火的
我好像基本没用过。