庆祝国庆

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

马黑黑 发表于 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 添加所构造的元素
});

红影发表于 2022-9-30 08:27

这个厉害了，星星沿着星星的轨迹，黑黑构思巧妙{:4_199:}

红影发表于 2022-9-30 08:29

以丰收的喜悦，同祝国庆佳节！借黑黑祝坛友们节日快乐{:4_187:}{:4_177:}

相约爱晚亭 发表于 2022-9-30 09:25

代码高手在花潮，无私奉献真英豪，开创音画新天地，众星捧月齐夸耀。祝国庆节快乐！

梦油发表于 2022-9-30 11:11

着五星的制作太巧秒了。祝黑黑朋友节日快乐！

小辣椒 发表于 2022-9-30 11:29

太惊艳了！大神，这个效果真的让我佩服的五体投地了，纯代码可以制作出来，{:4_178:}

小辣椒 发表于 2022-9-30 11:30

手机效果好的不得了{:4_199:}

小辣椒 发表于 2022-9-30 11:35

在欢乐的乐曲中，在黒黑精美的效果中，感受节日的气氛{:4_178:}

大神威武{:4_199:}

小辣椒 发表于 2022-9-30 11:37

黑黑辛苦，这个制作太美了。。。。

花潮有你太精彩了{:4_177:}

马黑黑 发表于 2022-9-30 12:15

小辣椒发表于 2022-9-30 11:37
黑黑辛苦，这个制作太美了。。。。

花潮有你太精彩了

今年是第五个丰收年

马黑黑 发表于 2022-9-30 12:30

红影发表于 2022-9-30 08:27
这个厉害了，星星沿着星星的轨迹，黑黑构思巧妙

这个谁都可以想到的

马黑黑 发表于 2022-9-30 12:30

小辣椒发表于 2022-9-30 11:35
在欢乐的乐曲中，在黒黑精美的效果中，感受节日的气氛

大神威武

{:5_108:}

马黑黑 发表于 2022-9-30 12:31

小辣椒发表于 2022-9-30 11:30
手机效果好的不得了

我倒没有用手机看过，下午试试

马黑黑 发表于 2022-9-30 12:31

红影发表于 2022-9-30 08:29
以丰收的喜悦，同祝国庆佳节！借黑黑祝坛友们节日快乐

{:5_108:}

马黑黑 发表于 2022-9-30 12:31

小辣椒发表于 2022-9-30 11:29
太惊艳了！大神，这个效果真的让我佩服的五体投地了，纯代码可以制作出来，

背景是图片

马黑黑 发表于 2022-9-30 12:32

相约爱晚亭发表于 2022-9-30 09:25
代码高手在花潮，无私奉献真英豪，开创音画新天地，众星捧月齐夸耀。祝国庆节快乐！

感谢捧场。来个西瓜？{:5_117:}

马黑黑 发表于 2022-9-30 12:32

梦油发表于 2022-9-30 11:11
着五星的制作太巧秒了。祝黑黑朋友节日快乐！

同祝同祝！

页: [1] 2 3 4

花潮论坛's Archiver

庆祝国庆