一覽眾山小

马黑黑

马黑黑

代码：

1. <style>
   
2. #mydiv {
   
3.         width: 760px;
   
4.         height:600px;
   
5.         border: thin solid gray;
   
6.         position: relative;
   
7. }
   
8. .txtbox {
   
9.         position: absolute;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         left: var(--x1);
    
13.         top: 10px;
    
14.         width: 50px;
    
15.         height: 50px;
    
16.         font: normal 30px sans-serif;
    
17.         text-align: center;
    
18.         box-sizing: border-box;
    
19. }
    
20. .txtbox::after {
    
21.         position: absolute;
    
22.         content: '';
    
23.         inset: 1px;
    
24.         border: 2px dashed gray;
    
25.         border-color: green red blue orange;
    
26.         border-radius: 50%;
    
27.         animation: rot 6s linear infinite;
    
28. }
    
29. @keyframes move1 {to { left: var(--x2); } }
    
30. @keyframes move2 { to { left: var(--x1); } }
    
31. @keyframes rot { to { transform: rotate(var(--deg)); } }
    
32. </style>
    
33. 
    
34. <div id="mydiv"></div>
    
35. 
    
36. <script>
    
37. 
    
38. const ar = '會當凌絕頂一覽眾山小'.split('');
    
39. const ww = 760, duTime = 4, deTime = 0.5; //运动宽度、运动时长、延时系数
    
40. let sAr = [], aniIdx = false; //标签数组、动画名索引
    
41. 
    
42. //生成span标签
    
43. ar.forEach((t,k) => {
    
44.         let span = document.createElement('span');
    
45.         span.className = 'txtbox';
    
46.         span.textContent = t;
    
47.         span.style.cssText += `
    
48.                 --x1: ${ww + k * 50 - ar.length * 50 - 20}px;
    
49.                 --x2: ${k * 50 + 10}px;
    
50.                 --deg: -1turn;
    
51.         `;
    
52.         sAr.push(span); //加入span标签数组
    
53.         mydiv.appendChild(span);
    
54. });
    
55. 
    
56. //动画函数 ：依据名称索引来回运行两个关键帧动
    
57. let playAni = () => {
    
58.         let aniName = ['move1','move2'][+aniIdx]; //选取关键帧动画
    
59.         let deg = ['-1turn','1turn'][+aniIdx]; //选取旋转角度
    
60.         sAr.forEach((item,key) => {
    
61.                 item.style.left = ['var(--x1)','var(--x2)'][+aniIdx]; //运行动关键帧画前固定位置
    
62.                 item.style.setProperty('--deg', deg); //设置旋转方向
    
63.                 //计算延时执行动画 ：自右向左 - 系数×序号; 反之 - 系数×(总数-序号-1)
    
64.                 let delay = aniIdx ? deTime * (sAr.length - key - 1) : deTime * key;
    
65.                 //设置元素动画
    
66.                 item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards`;
    
67.         });
    
68.         aniIdx = !aniIdx; //布尔索引取反 ：为下一次准备另一个动画
    
69.         /* 定时器 ：递归调用函数自身以永动
    
70.            间隔时间 - 动画时长+总数×延时系数+延时系数(间隔时间大于所有元素运行完毕总用时 deTime 秒)
    
71.         */
    
72.         setTimeout(playAni, (duTime + sAr.length * deTime + deTime) * 1000);
    
73. };
    
74. 
    
75. playAni(); //启动动画
    
76. 
    
77. </script>

复制代码

红影

这个有趣，文字来回游荡，而且文字外围的动态环，还能反向转动呢

红影

这个看着很好看，但是感觉很复杂的

南无月

想到了排排座，吃果果。。
这个文字设计好看又好玩。。

南无月

左右移动，碰触反向，循环不断，永不停止。。
这永动机制太厉害了。。

马黑黑

南无月 发表于 2024-6-3 20:29
左右移动，碰触反向，循环不断，永不停止。。
这永动机制太厉害了。。

马黑黑

南无月 发表于 2024-6-3 20:28
想到了排排座，吃果果。。
这个文字设计好看又好玩。。

马黑黑

红影 发表于 2024-6-3 20:10
这个看着很好看，但是感觉很复杂的

两个关键帧动画交替运行，这是原理

马黑黑

红影 发表于 2024-6-3 19:52
这个有趣，文字来回游荡，而且文字外围的动态环，还能反向转动呢

细节还是多点的

南无月

马黑黑 发表于 2024-6-4 07:54

挺厉害的，
给字加动框，同时还左右移。。
这个双动就不得了

南无月

马黑黑 发表于 2024-6-4 07:54

跟老师一样，颜值超群

马黑黑

南无月 发表于 2024-6-4 17:52
跟老师一样，颜值超群

哇塞

马黑黑

南无月 发表于 2024-6-4 17:51
挺厉害的，
给字加动框，同时还左右移。。
这个双动就不得了

不是特好控制

南无月

马黑黑 发表于 2024-6-4 19:30
哇塞

看到你发的贴子了

南无月

马黑黑 发表于 2024-6-4 19:30
不是特好控制

多动很复杂，又实现，精妙

马黑黑

南无月 发表于 2024-6-4 20:28
多动很复杂，又实现，精妙

如果只管动不理开关，那要简单得多

马黑黑

南无月 发表于 2024-6-4 20:27
看到你发的贴子了

南无月

马黑黑 发表于 2024-6-4 21:08
如果只管动不理开关，那要简单得多

机械管理师。。这个小齿轮承载东西太多了

南无月

马黑黑 发表于 2024-6-4 21:08

近视的