|
|
本帖最后由 起个网名好难 于 2024-10-27 22:41 编辑
抄你的帖,没有音乐、没有视频的简化版。
- <style>
- :root {--state:running;}
- #pa {
- margin: 60px 0 30px calc(50% - 721px);
- width: 1280px;
- height: 720px;
- background: url('https://pic.imgdb.cn/item/671c2841d29ded1a8c9c3f3a.jpg') no-repeat center/cover;
- box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
- z-index: 1;
- position: relative;
- overflow: hidden;
- }
- .myball1 {
- 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');
- offset-distance: 0%;
- animation: move2 10s var(--delay) linear infinite var(--state);
- }
- .myball2 {
- 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');
- offset-distance: 0%;
- animation: move2 10s var(--delay) linear infinite var(--state);
- }
- .myball3 {
- 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');
- offset-distance: 0%;
- animation: move2 10s var(--delay) linear infinite var(--state);
- }
- .myball4 {
- 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');
- offset-distance: 0%;
- animation: move2 10s var(--delay) linear infinite var(--state);
- }
- #player {
- cursor: pointer;
- transform-box: fill-box;
- transform-origin: center;
- animation: rot 10s linear infinite var(--state)
- }
- #wenzi {
- fill: url(#lgd);
- font:italic bold 3.5em Times New Roman;
- text-shadow: 1px 1px 2px gray, 2px 2px 4px #fff;
- -webkit-box-reflect: below 0 linear-gradient(transparent, rgba(0, 0, 0, .55));
- text-anchor: middle;
- }
- @keyframes move2 {
- to {
- offset-distance: 100%;
- }
- }
- @keyframes rot {
- to {
- transform: rotate(360deg);
- }
- }
- </style>
- <div id="pa"></div>
- <script>
- function makeTagObj(jsonData) {
- let sObj = document.createElementNS("http://www.w3.org/2000/svg",jsonData.tag);
- for (let key in jsonData) {
- if(key === 'tag') {
- continue;
- }
- else if (jsonData.hasOwnProperty(key)) {
- sObj.setAttribute(key, jsonData[key]);
- }
- }
- return sObj;
- }
- let msvg = makeTagObj({'tag':'svg', 'id':'msvg', 'width':'100%', 'height':'100%'});
- let defs = makeTagObj({'tag':'defs', 'id':'defs'});
- let cc = makeTagObj({'tag':'circle', 'id':'cc', 'cx':0, 'cy':0, 'r':6, 'fill':'#79f5fc'});
- defs.appendChild(cc);
- let lgd = makeTagObj({'tag':'linearGradient', 'id':'lgd', 'x1':'1', 'y1':'1', 'x2':'0', 'y2':'1'});
- let sc = makeTagObj({'tag':'stop', 'offset':0, 'stop-color':'green'});
- lgd.appendChild(sc);
- sc = makeTagObj({'tag':'stop', 'offset':0.5, 'stop-color':'Auqamarin'});
- lgd.appendChild(sc);
- sc = makeTagObj({'tag':'stop', 'offset':1, 'stop-color':'DeepSkyBlue'});
- lgd.appendChild(sc);
- defs.appendChild(lgd);
-
- let pl = makeTagObj({'tag':'g', 'id':'player'});
- defs.appendChild(pl);
- msvg.appendChild(defs);
- pa.appendChild(msvg);
- for(let k = 0; k < 10; k++) {
- 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)`});
- pl.appendChild(pt);
- }
-
- let lz = makeTagObj({'tag':'use', 'href':'#player','x':560,'y':157});
- msvg.appendChild(lz);
-
- for(let n = 0; n < 4; n++) {
- for(let j = 0; j < 20; j++) {
- lz = makeTagObj({'tag':'use', 'href':'#cc','class':`myball${n+1}`, 'style':`--delay:${-0.5 * j}s`});
- msvg.appendChild(lz);
- }
- }
- let txt = makeTagObj({'tag':'text', 'id':'wenzi','x':`50%`, 'y':`90%`});
- txt.textContent = 'Magic Travel';
- msvg.appendChild(txt);
- </script>
复制代码 |
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|