庆祝国庆

马黑黑 · 发表于 2022-9-30 06:33

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

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

x

★ 慶祝國慶

00:00 | 00:00

马黑黑 · 发表于 2022-9-30 07:37

五角星路径，用于运动对象即运动主体元素：

offset-path: path("m359.19999,329.57595l140.56449,0l43.43551,-142.4737l43.43553,142.4737l140.56446,0l-113.71885,88.05258l43.43776,142.4737l-113.7189,-88.05498l-113.71887,88.05498l43.43777,-142.4737l-113.71889,-88.05258z");

同时运动主体元素需要定义：offset-distance: 0%;

关键帧动画就可以简化为：@keyframes move{ to {offset-distance:100%;} }

运动路径可以通过第三方路径工具生成（比如PS、在线路径工具）。路径的位置无需纠结，只要运动对象设定为 position: absolute; 、父元素设定为 position: relative，则可通过对运动对象的 left 和 left 进行物理定位，路径会参照运动对象的物理位置定位自身。

路径来源于svg，但我们只要这个路径，不需要svg的出现。

马黑黑 · 发表于 2022-9-30 07:38

帖子代码

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: #ccc url('/data/attachment/forum/202209/30/062458ga244izn1axzavg8.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
#mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, purple, orange); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, purple 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
.star5 { position: absolute; background: transparent; top: 0px; left: 0; font: normal 26px /26px sans-serif; offset-distance: 0%; offset-path: path("m359.19999,329.57595l140.56449,0l43.43551,-142.4737l43.43553,142.4737l140.56446,0l-113.71885,88.05258l43.43776,142.4737l-113.7189,-88.05498l-113.71887,88.05498l43.43777,-142.4737l-113.71889,-88.05258z"); text-shadow: 0 0 12px rgba(0,0,0,.75); animation: move 12s var(--ss) linear infinite; }
.tit { position: absolute; left: 10px; top: 10px; font: bold 3em sans-serif; background: linear-gradient(to bottom, rgba(255,255,0,.9) 0%, rgba(0,200,100,.95) 100%); font: bold 2.6em sans-serif; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter:drop-shadow(0 6px 2px rgba(0,0,0,.9)); }
@keyframes move{to{offset-distance:100%}}
</style>
<div id="papa">
<div class="tit">★ 慶祝國慶</div>
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 40}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '★';
ele.style.cssText += `--ss: ${key * 0.3}s; color: #${setColor()};`;
papa.appendChild(ele);
});
aud.src = 'https://music.163.com/song/media/outer/url?id=1926885195.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
</script>

复制代码

马黑黑 · 发表于 2022-9-30 07:51

小星星沿着五角星路径运动，除了小星星所寄存的父元素设定相对定位之外，还依托自身的CSS设置和关键帧动画（@keyframes）：

.star5 {
      position: absolute;
      background: transparent;
      top: 0px;
      left: 0;
      font: normal 26px /26px sans-serif;
      offset-distance: 0%;
      offset-path: path("m359.19999,329.57595l140.56449,0l43.43551,-142.4737l43.43553,142.4737l140.56446,0l-113.71885,88.05258l43.43776,142.4737l-113.7189,-88.05498l-113.71887,88.05498l43.43777,-142.4737l-113.71889,-88.05258z");
      text-shadow: 0 0 12px rgba(0,0,0,.75);
      animation: move 12s var(--ss) linear infinite;
}

@keyframes move{ to {offset-distance:100%;} }

然后写一个 HTML 标签：

<span class="star5" style="color:red;">★</span>

这颗红色的小五角星就会沿着大五角星路径运动。

当然，我们要写40颗小五角星，每一颗的颜色还不一样，让它们出发后连成一个大五角星。这时，JS最爱干这个：

let setColor = () => Math.random().toString(16).substr(-6); //随机颜色生成小工具
//下面写40颗星星
Array.from({length: 40}).forEach((ele,key) => { //构建40个数组元素，它们都 ↓
      ele = document.createElement('span'); //元素的HTML标签为 span
      ele.className = 'star5'; //元素的 class="stars5" → 调用CSS 的 star5 选择器
      ele.innerText = '★'; //元素的文本
      ele.style.cssText += `--ss: ${key * 0.3}s; color: #${setColor()};`; //元素的额外CSS样式：延时运行动画、文本颜色
      papa.appendChild(ele); //父元素 papa 添加所构造的元素
});