|
|

楼主 |
发表于 2024-6-3 19:40
|
显示全部楼层
代码:
- <style>
- #mydiv {
- width: 760px;
- height:600px;
- border: thin solid gray;
- position: relative;
- }
- .txtbox {
- position: absolute;
- display: grid;
- place-items: center;
- left: var(--x1);
- top: 10px;
- width: 50px;
- height: 50px;
- font: normal 30px sans-serif;
- text-align: center;
- box-sizing: border-box;
- }
- .txtbox::after {
- position: absolute;
- content: '';
- inset: 1px;
- border: 2px dashed gray;
- border-color: green red blue orange;
- border-radius: 50%;
- animation: rot 6s linear infinite;
- }
- @keyframes move1 {to { left: var(--x2); } }
- @keyframes move2 { to { left: var(--x1); } }
- @keyframes rot { to { transform: rotate(var(--deg)); } }
- </style>
- <div id="mydiv"></div>
- <script>
- const ar = '會當凌絕頂一覽眾山小'.split('');
- const ww = 760, duTime = 4, deTime = 0.5; //运动宽度、运动时长、延时系数
- let sAr = [], aniIdx = false; //标签数组、动画名索引
- //生成span标签
- ar.forEach((t,k) => {
- let span = document.createElement('span');
- span.className = 'txtbox';
- span.textContent = t;
- span.style.cssText += `
- --x1: ${ww + k * 50 - ar.length * 50 - 20}px;
- --x2: ${k * 50 + 10}px;
- --deg: -1turn;
- `;
- sAr.push(span); //加入span标签数组
- mydiv.appendChild(span);
- });
- //动画函数 :依据名称索引来回运行两个关键帧动
- let playAni = () => {
- let aniName = ['move1','move2'][+aniIdx]; //选取关键帧动画
- let deg = ['-1turn','1turn'][+aniIdx]; //选取旋转角度
- sAr.forEach((item,key) => {
- item.style.left = ['var(--x1)','var(--x2)'][+aniIdx]; //运行动关键帧画前固定位置
- item.style.setProperty('--deg', deg); //设置旋转方向
- //计算延时执行动画 :自右向左 - 系数×序号; 反之 - 系数×(总数-序号-1)
- let delay = aniIdx ? deTime * (sAr.length - key - 1) : deTime * key;
- //设置元素动画
- item.style.animation = `${aniName} ${duTime}s ${delay}s linear forwards`;
- });
- aniIdx = !aniIdx; //布尔索引取反 :为下一次准备另一个动画
- /* 定时器 :递归调用函数自身以永动
- 间隔时间 - 动画时长+总数×延时系数+延时系数(间隔时间大于所有元素运行完毕总用时 deTime 秒)
- */
- setTimeout(playAni, (duTime + sAr.length * deTime + deTime) * 1000);
- };
- playAni(); //启动动画
- </script>
复制代码
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|