每一步

马黑黑 · 发表于 2022-11-28 12:39

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

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

x

马黑黑 · 发表于 2022-11-28 12:47

本帖播放器使用24号插件，对播放器使用默认样式，未做设置。

尝试将lrc歌词放在帖子父元素正下方，配置插件 lrc_css 接口代码如下：

HCPlayer({
lrcAr: lrcAr,
lrc_css: 'bottom: -1.2em; --bg: linear-gradient(lightgreen,darkgreen, green); opacity: .72;',
});

马黑黑 · 发表于 2022-11-28 12:57

左上角帖子标题效果解释：

① CSS设置

.tit {
      position: absolute;
      top: 0;
      text-align: center;
      font: bold 2.4em / 2.4em sans-serif;
      color: hsla(240,0%,90%,.35);
      text-shadow: 1px 1px 2px snow;
}

@keyframes chgColor { to { color: #2F5F78; text-shadow: -6px -6px 36px snow,1px 1px 2px snow; } }

其中，关键帧动画执行两个任务，一是变换文本颜色，二是设定文本背影。

② 第一步，用JS生成标题，以 span 标签装载每一个字，对每一个 span 设置相关属性，然后追加到 id="papa" 的帖子父元素：

      let outstr = '徐小凤每一步', num = 0;/*num变量是动画来回执行的依据*/

      Array.from({length: outstr.length}).forEach((item,key) => {
            item = document.createElement('span');
            item.className = 'tit';
            item.innerText = outstr.slice(key,key+1);
            item.style.cssText += `left: ${key*1.2 + 1 }em`;
            papa.appendChild(item);
      });

第二步，写一个自定义的自执行函数，令所有 span 依次并循环执行关键帧动画：

      let tits = document.querySelectorAll('.tit');/*获得所有span操作句柄*/
      (function chgFn() {
            tits[num].style.animation = 'chgColor linear 2s backwards';
            setTimeout( () => {
                     chgFn();
                     tits[num].style.animation = '';/*清除动画，否则下次轮到时执行无效*/
            }, 2000);
            num += 1;
            if(num > outstr.length - 1) num = 0;
      })();