Elevate

马黑黑 发表于 2025-7-31 13:04

马黑黑 发表于 2025-7-31 13:05

帖子代码

<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css?v=0.1';
#pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w4/origin.webp') no-repeat center/cover; --ma-size: 200px; }
#btnFs { bottom: 20px; color: #eee; }
#mwrap { position: absolute; left: 60px; bottom: 5px; width: 400px; height: 400px; }
#ma { left: 100px; bottom: 90px; display: grid; place-items: center; }
#ma::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: cyan; }
.son { position: absolute; width: 100%; height: 1px; background: linear-gradient(to right, var(--bg1), var(--bg2)); transform: rotate(var(--a)); display: grid; place-items: center; }
.son::before, .son::after { content: ''; position: absolute; width: 24px; height: 24px; background: inherit; border-radius: 50%; left: 0; }
.son::after { left: calc(100% - 20px); }
.ani { animation: flash 1s linear alternate var(--state), rotate 1s linear var(--state); }
@keyframes flash { to { color: red; opacity: .7; } }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1903409380" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fd83151c9175.mp4" autoplay loop muted></video>
<div id="mwrap">
   <div id="ma" class="brightness"></div>
</div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);

var txtAr = 'ELEVATE'.split(''), spans = [], total = 7;

txtAr.forEach( (t, k) => {
   var s = document.createElement('span');
   s.textContent = t;
   s.className = k === 0 ? 'title-text ani' : 'title-text';
   var a = -120 / (txtAr.length - 1) * k - 120, r = 170;
   s.style.cssText += `
         left: ${r + r * Math.cos(a * Math.PI / 180)}px;
         top: ${r + r * Math.sin(a * Math.PI / 180)}px;
   `;
   spans.push(s);
   s.onanimationend = () => {
         s.classList.remove('ani');
         spans[(k + 1) % txtAr.length].classList.add('ani');
   };
   mwrap.appendChild(s);
});

Array.from({length: total}).forEach( (son, key) => {
   son = document.createElement('div');
   son.className = 'son';
   son.style.cssText += `
         --bg1: #${Math.random().toString(16).substring(2, 8)};
         --bg2: #${Math.random().toString(16).substring(2, 8)};
         --a: ${key * 180 / total}deg;
   `;
   ma.appendChild(son);
});
</script>

小辣椒 发表于 2025-7-31 13:08

小辣椒全不懂了，现在不知道套用会不会了{:4_198:}

马黑黑 发表于 2025-7-31 13:08

小播：纯CSS+HTML实现

弧形文本：使用正弦和余弦函数确定 left 和 top 属性值，取代 rotate+translate 方法，这样方便文本标签无障碍使用 transform 动画。

小播和文本塞进同一个容器中，方便布局。

马黑黑 发表于 2025-7-31 13:10

小辣椒发表于 2025-7-31 13:08
小辣椒全不懂了，现在不知道套用会不会了

等能自由、随意做帖了就什么都懂，懂王也没你懂{:4_170:}

小辣椒 发表于 2025-7-31 13:11

马黑黑发表于 2025-7-31 13:10
等能自由、随意做帖了就什么都懂，懂王也没你懂

都不敢仔细看代码，过段时间再说了，现在是一头雾水{:4_203:}

马黑黑 发表于 2025-7-31 13:13

小辣椒发表于 2025-7-31 13:11
都不敢仔细看代码，过段时间再说了，现在是一头雾水

不急的，等恢复正常了再说

梦江南 发表于 2025-7-31 14:43

老师把文字和小播结合起来了。太精彩了！{:4_187:}

红影发表于 2025-7-31 15:17

进来就看到标题字的不一样，竖排的而且是弧度排列，文字可以逐个高亮和转动。
看讲解，原来实现方式改变了，直接用三角函数就解决了，这样好，文字不用再一次转向了{:4_187:}

杨帆发表于 2025-7-31 15:23

漂亮！谢谢马老师经典分享{:4_190:}

小文发表于 2025-7-31 15:32

好有科技感，大赞！{:4_191:}

红影发表于 2025-7-31 15:37

马黑黑发表于 2025-7-31 13:08
小播：纯CSS+HTML实现

弧形文本：使用正弦和余弦函数确定 left 和 top 属性值，取代 rotate+translate...

就是那个400乘400的容器吧，播放器200的宽度，放在了 left: 100px;的地方，文字170的半径，里面正好够用了{:4_173:}

红影发表于 2025-7-31 15:38

.son::after { left: calc(100% - 20px); } 这个没看懂，另一段的圆球不是应该扣除24或者12么，为什么是20呢？

冬天的雨 发表于 2025-7-31 17:38

欣赏马老师新鲜出炉的，最新的播放器吧，漂亮，可惜冬雨不会，现在做不了了

冬天的雨 发表于 2025-7-31 17:39

要不直接套用玩一个试试

马黑黑 发表于 2025-7-31 18:25

冬天的雨发表于 2025-7-31 17:39
要不直接套用玩一个试试

墙裂支持

马黑黑 发表于 2025-7-31 18:25

冬天的雨发表于 2025-7-31 17:38
欣赏马老师新鲜出炉的，最新的播放器吧，漂亮，可惜冬雨不会，现在做不了了

这个应该简单吧

马黑黑 发表于 2025-7-31 18:27

红影发表于 2025-7-31 15:38
.son::after { left: calc(100% - 20px); } 这个没看懂，另一段的圆球不是应该扣除24或者12么，为什么是20 ...
这是漏改吧。原来设置的小球是20px，后面该大一点，对应要改的没跟上，好在影响不大

马黑黑 发表于 2025-7-31 18:30

红影发表于 2025-7-31 15:37
就是那个400乘400的容器吧，播放器200的宽度，放在了 left: 100px;的地方，文字170的半径，里面正好够用 ...

这个尺寸不是很重要，但对文本、小播的布局是有关系的

马黑黑 发表于 2025-7-31 18:30

小文发表于 2025-7-31 15:32
好有科技感，大赞！

{:4_191:}

页: [1] 2 3 4 5

花潮论坛's Archiver

Elevate