蓝色的海

马黑黑 · 发表于 2022-11-23 07:51

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

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

x

马黑黑 · 发表于 2022-11-23 07:52

插件配置代码：

<script >

//插件代码略
let lrcAr = [
      [2, "纯音乐 - 蓝色的海", 3],
];
HCPlayer({
      lrcAr: lrcAr,
      player_css: 'bottom: 20px; --color: darkblue; --ww: 300px; --prog: linear-gradient(90deg, lightblue, red, lightblue); opacity: .77;',
      lrc_css: 'top: 20px; right: 30px; --bg: linear-gradient(blue,lightblue);opacity: .72;',
});

</script>

马黑黑 · 发表于 2022-11-23 08:06

本帖最后由马黑黑于 2022-11-23 08:11 编辑

旋转的光条为CSS原创，实现原理是：用角向渐变模拟从中心向四周散射的光条，载体为父元素的伪元素，然后领该伪元素做关键帧动画。

代码：

#papa::before {
      position: absolute;
      content: '';
      left: 45px;
      top: -20px;
      width: 675px;
      height: 675px;
      background: repeating-conic-gradient(hsla(0,0%,100%,.15) 0 4deg,transparent 0 60deg);
      animation: rot 20s linear infinite alternate;
}
@keyframes rot { to { transform: rotate(1turn); } }

repeating-conic-gradient 是重复性角向渐变，用到的颜色共两个，其一为 hsla(0,0%,100%,.15)，透明度 0.85 的白色，这就是光条，其二是 transparent，纯粹的透明色，没有颜色。因为重复渐变，所以必须设置参数，前者为 0 4deg，就是单条光条的角度开始处为 0 度、往外延伸占 4 度；后者为 0 60deg，表示在中心占 0 个角度，延伸后占 60 度，这是利用透明占位让光条稀疏一点的设定。

关键帧动画 @keyframe 就是让运动对象转一圈。

animation: rot 20s linear infinite alternate; 这句调用关键帧动画，匀速（linear）、20秒一个回合、永动（infinite）、往复（alternate）。因为往复，实际一个来回的运动占用的时间应是 20秒 * 2