翻个底朝天

马黑黑

马黑黑

代码

1. <style>
   
2. #mybox {
   
3.         margin: auto;
   
4.         position: relative;
   
5. }
   
6. .mysp {
   
7.         position: absolute;
   
8.         font: bold 28px/36px sans-serif;
   
9. }
   
10. 
    
11. @keyframes move {
    
12.         0% { top: 0px; transform: rotate(0); color: olive; }
    
13.         50% { top: 60px; transform: rotate(100deg); color: red; }
    
14.         100% { top: 0px; transform: rotate(360deg); color: green; }
    
15. }
    
16. </style>
    
17. 
    
18. <div id="mybox"></div>
    
19. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1456393572.mp3" loop></audio>
    
20. 
    
21. <script>
    
22. (function() {
    
23.         let spans = [],idx = 0, last = null;
    
24. 
    
25.         [...'花潮论坛'].forEach((item,key) => {
    
26.                 let sp = document.createElement('span');
    
27.                 sp.className = 'mysp';
    
28.                 sp.innerText = item;
    
29.                 sp.style.cssText += `left: ${key*36+36}px`;
    
30.                 spans.push(sp);
    
31.                 mybox.appendChild(sp);
    
32.         });
    
33. 
    
34.         let mov = () => {
    
35.                 if(last != null) spans[last].style.animation = '';
    
36.                 spans[idx].style.animation = 'move 2s';
    
37.                 last = idx;
    
38.                 idx += 1;
    
39.                 if(idx >= spans.length) idx = 0;
    
40.                 setTimeout(mov,2000);
    
41.         };
    
42. 
    
43.         mov();
    
44. })();
    
45. </script>

复制代码

东篱闲人

黑黑真会玩！

起个网名好难

顽皮的字

马黑黑

醉美水芙蓉 发表于 2023-2-10 21:56
欣赏老师佳作！

感謝支持

马黑黑

起个网名好难 发表于 2023-2-10 21:57
顽皮的字

晚上好

马黑黑

东篱闲人 发表于 2023-2-10 21:56
本帖最后由 东篱闲人 于 2023-2-10 22:00 编辑 黑黑真会玩！

东篱闲人

马黑黑 发表于 2023-2-10 22:02

马黑黑

东篱闲人 发表于 2023-2-10 22:05
#mybox {
        margin: auto;
        position: relative;

膩害膩害

小辣椒

黑黑，太棒了

马黑黑

小辣椒 发表于 2023-2-10 22:19
黑黑，太棒了

你把冬雨转晕了木有

小辣椒

马黑黑 发表于 2023-2-10 22:20
你把冬雨转晕了木有

估计会

马黑黑

小辣椒 发表于 2023-2-10 22:20
估计会

晕晕也好，可以提高身体素质

红影

这个有趣，还可以逐个底朝天的，而且是变着颜色的

小辣椒

马黑黑 发表于 2023-2-10 22:20
晕晕也好，可以提高身体素质

反正就是呼叫冬雨出来就好

马黑黑

小辣椒 发表于 2023-2-10 22:29
反正就是呼叫冬雨出来就好

马黑黑

红影 发表于 2023-2-10 22:27
这个有趣，还可以逐个底朝天的，而且是变着颜色的

也是文本特效的一种形式吧

小辣椒

马黑黑 发表于 2023-2-10 22:34

冬天必须每天触动一下

马黑黑

小辣椒 发表于 2023-2-10 22:39
冬天必须每天触动一下

你找到他的软肋了