Magic Travel（学习黑黑Truck效果）

红影

小文 发表于 2024-10-27 16:25
玄幻的美！问候恩师！

谢谢小文，自从喜欢上音画，无端感受到很多奇妙的美

红影

小辣椒 发表于 2024-10-27 19:52
配这个图做路径也是厉害的，这种我就不会了

这个路径是以前弄的时候就用过，现在也一样的呢。

红影

小辣椒 发表于 2024-10-27 19:53
亲爱的你就是谦虚

还真没谦虚的呢，就是玩啊

红影

起个网名好难 发表于 2024-10-27 20:07
svg渐变字

………………

谢谢难难，我去试试。。。。

红影

起个网名好难 发表于 2024-10-27 20:07
svg渐变字

………………

没试出来，不知道我什么地方又弄错了

红影

起个网名好难 发表于 2024-10-27 20:45
高，实在是高

我这么稀里糊涂的人，想高也高不了啊

起个网名好难

红影 发表于 2024-10-27 21:14
没试出来，不知道我什么地方又弄错了

抄你的帖，没有音乐、没有视频的简化版。

1. <style>
   
2.     :root  {--state:running;}
   
3.   #pa {
   
4.     margin: 60px 0 30px calc(50% - 721px);
   
5.     width: 1280px;
   
6.     height: 720px;
   
7.     background: url('https://pic.imgdb.cn/item/671c2841d29ded1a8c9c3f3a.jpg') no-repeat center/cover;
   
8.     box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
   
9.     z-index: 1;
   
10.     position: relative;
    
11.     overflow: hidden;
    
12.   }
    
13. 
    
14.   .myball1 {
    
15.     offset-path: path('m533,313c-2,-15 -64,-23 -72,-18c-9,-4 -92,39 -111.00001,34.51999c-20.99999,2.48001 -82.99999,-70.52 -131,-88c-26.99999,-15.52 -138,22.48 -149,16c-7,6.48 -63,5.48 -63,5');
    
16.     offset-distance: 0%;
    
17.     animation: move2 10s var(--delay) linear infinite var(--state);
    
18.   }
    
19. 
    
20.   .myball2 {
    
21.     offset-path: path('m750,320c0,0 42,-29 69,-21c17,-9 104,39 122,31c22,3 116,-97.00001 145,-89.00001c16,-12 117.08001,21 123.08001,19c12,6 84,6 84,6');
    
22.     offset-distance: 0%;
    
23.     animation: move2 10s var(--delay) linear infinite var(--state);
    
24.   }
    
25. 
    
26.   .myball3 {
    
27.     offset-path: path('m728,349c42.00001,19 79.00001,102 79.00001,102c33,5 81,-9 81,-9c-5,76 64,146 64,146c42,82 216,123 238,118');
    
28.     offset-distance: 0%;
    
29.     animation: move2 10s var(--delay) linear infinite var(--state);
    
30.   }
    
31. 
    
32.   .myball4 {
    
33.     offset-path: path('m565,352.60002c-59,21 -78,95 -78,95c-16,18 -58,-25 -82,-10c13,63 -72,144 -72,144c-79,102 -180.00001,118 -229.00001,121');
    
34.     offset-distance: 0%;
    
35.     animation: move2 10s var(--delay) linear infinite var(--state);
    
36.   }
    
37. 
    
38.   #player {
    
39.     cursor: pointer;
    
40.     transform-box: fill-box;
    
41.     transform-origin: center;
    
42.     animation: rot 10s linear infinite var(--state)
    
43.   }
    
44. 
    
45.   #wenzi {
    
46.     fill: url(#lgd);
    
47.     font:italic bold 3.5em Times New Roman;
    
48.     text-shadow: 1px 1px 2px gray, 2px 2px 4px #fff;
    
49.     -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0, 0, 0, .55));
    
50.         text-anchor: middle;
    
51.   }
    
52. 
    
53.   @keyframes move2 {
    
54.     to {
    
55.       offset-distance: 100%;
    
56.     }
    
57.   }
    
58. 
    
59.   @keyframes rot {
    
60.     to {
    
61.       transform: rotate(360deg);
    
62.     }
    
63.   }
    
64. </style>
    
65. 
    
66. <div id="pa"></div>
    
67. 
    
68. <script>
    
69. function makeTagObj(jsonData)        {
    
70.         let sObj = document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);
    
71.         for (let key in jsonData) {
    
72.                 if(key === 'tag') {
    
73.                         continue;
    
74.                 }
    
75.                 else if (jsonData.hasOwnProperty(key)) {
    
76.                         sObj.setAttribute(key, jsonData[key]);
    
77.                 }
    
78.         }
    
79.         return sObj;
    
80. }
    
81.         let msvg = makeTagObj({'tag':'svg', 'id':'msvg', 'width':'100%', 'height':'100%'});
    
82.                 let defs = makeTagObj({'tag':'defs', 'id':'defs'});
    
83.                         let cc = makeTagObj({'tag':'circle', 'id':'cc', 'cx':0, 'cy':0, 'r':6, 'fill':'#79f5fc'});
    
84.                         defs.appendChild(cc);
    
85.                         let lgd = makeTagObj({'tag':'linearGradient', 'id':'lgd', 'x1':'1', 'y1':'1', 'x2':'0', 'y2':'1'});
    
86.                                 let sc = makeTagObj({'tag':'stop', 'offset':0, 'stop-color':'green'});
    
87.                                 lgd.appendChild(sc);
    
88.                                 sc = makeTagObj({'tag':'stop', 'offset':0.5, 'stop-color':'Auqamarin'});
    
89.                                 lgd.appendChild(sc);
    
90.                                 sc = makeTagObj({'tag':'stop', 'offset':1, 'stop-color':'DeepSkyBlue'});
    
91.                                 lgd.appendChild(sc);
    
92.                         defs.appendChild(lgd);
    
93.                                
    
94.                         let pl = makeTagObj({'tag':'g', 'id':'player'});
    
95.                         defs.appendChild(pl);
    
96.                 msvg.appendChild(defs);
    
97.         pa.appendChild(msvg);
    
98. 
    
99.         for(let k = 0; k < 10; k++)        {
    
100.                 let pt = makeTagObj({'tag':'path', 'd':'M80 80 Q-210 90, 40 -20', 'fill':'transparent', 'stroke':'url(#lgd)', 'stroke-width':12, 'stroke-linecap':'round', 'transform':`rotate(${36*k} 80 80)`});
     
101.                 pl.appendChild(pt);
     
102.         }
     
103.        
     
104.         let lz = makeTagObj({'tag':'use', 'href':'#player','x':560,'y':157});
     
105.         msvg.appendChild(lz);
     
106.        
     
107.         for(let n = 0; n < 4; n++)        {
     
108.                 for(let j = 0; j < 20; j++)        {
     
109.                         lz = makeTagObj({'tag':'use', 'href':'#cc','class':`myball${n+1}`, 'style':`--delay:${-0.5 * j}s`});
     
110.                         msvg.appendChild(lz);
     
111.                 }
     
112.         }
     
113. 
     
114.         let txt = makeTagObj({'tag':'text', 'id':'wenzi','x':`50%`, 'y':`90%`});
     
115.         txt.textContent = 'Magic Travel';
     
116.         msvg.appendChild(txt);
     
117. </script>

复制代码

花飞飞

马黑黑 发表于 2024-10-27 16:57
挺好挺好

不好了，出大事儿了。发到论坛连小播都没了。。我今天无法处理，烧脑太过。。

花飞飞

马黑黑 发表于 2024-10-27 16:58
不声明拿不到操作入口

原来如此，那天还纳闷。。看了这灌水记录就明白了。

小文

红影 发表于 2024-10-27 21:00
谢谢小文，自从喜欢上音画，无端感受到很多奇妙的美

现在恩师已经出神入画了！大赞！

马黑黑

花飞飞 发表于 2024-10-27 22:04
原来如此，那天还纳闷。。看了这灌水记录就明白了。

JS要操作元素，就必须知道是哪一个（些）元素。有id的元素直接操作id，没有的要获取一下

马黑黑

花飞飞 发表于 2024-10-27 22:03
不好了，出大事儿了。发到论坛连小播都没了。。我今天无法处理，烧脑太过。。

慢慢来不急

红影

起个网名好难 发表于 2024-10-27 21:43
抄你的帖，没有音乐、没有视频的简化版。

太好了，去看过了，的确是渐变的了，谢谢难难
今天有点晚了，空了我来好好学习一下。

红影

小文 发表于 2024-10-27 22:42
现在恩师已经出神入画了！大赞！

哪里啊，我真的就跟在后面学的而已

梦油

红影 发表于 2024-10-27 15:40
而且是无偿的。

是啊，无偿加班违反劳动法。

红影

梦油 发表于 2024-10-28 11:30
是啊，无偿加班违反劳动法。

但为了怕丢掉工作，很多人只能忍了。

花飞飞

马黑黑 发表于 2024-10-27 22:53
慢慢来不急

昨天没空，一会就去整一整 。

花飞飞

马黑黑 发表于 2024-10-27 22:52
JS要操作元素，就必须知道是哪一个（些）元素。有id的元素直接操作id，没有的要获取一下

这个声明很有意思。先检个录，点个名，准备一会上场 。

梦油

红影 发表于 2024-10-28 23:12
但为了怕丢掉工作，很多人只能忍了。

现在，求职的人很多，一个人辞职，马上就有人顶上来。

马黑黑

花飞飞 发表于 2024-10-29 09:47
这个声明很有意思。先检个录，点个名，准备一会上场 。

这是JS操作元素的流程。

id号唯一，所以当元素有id号，可以不声明。