|
|

楼主 |
发表于 2023-2-10 21:45
|
显示全部楼层
本帖最后由 马黑黑 于 2023-2-10 21:46 编辑
代码
- <style>
- #mybox {
- margin: auto;
- position: relative;
- }
- .mysp {
- position: absolute;
- font: bold 28px/36px sans-serif;
- }
- @keyframes move {
- 0% { top: 0px; transform: rotate(0); color: olive; }
- 50% { top: 60px; transform: rotate(100deg); color: red; }
- 100% { top: 0px; transform: rotate(360deg); color: green; }
- }
- </style>
- <div id="mybox"></div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.mp3" loop></audio>
- <script>
- (function() {
- let spans = [],idx = 0, last = null;
- [...'花潮论坛'].forEach((item,key) => {
- let sp = document.createElement('span');
- sp.className = 'mysp';
- sp.innerText = item;
- sp.style.cssText += `left: ${key*36+36}px`;
- spans.push(sp);
- mybox.appendChild(sp);
- });
- let mov = () => {
- if(last != null) spans[last].style.animation = '';
- spans[idx].style.animation = 'move 2s';
- last = idx;
- idx += 1;
- if(idx >= spans.length) idx = 0;
- setTimeout(mov,2000);
- };
- mov();
- })();
- </script>
复制代码
|
|