小文 发表于 2024-10-27 16:25
玄幻的美！问候恩师！
谢谢小文，自从喜欢上音画，无端感受到很多奇妙的美{:4_173:}
小辣椒 发表于 2024-10-27 19:52
配这个图做路径也是厉害的，这种我就不会了
这个路径是以前弄的时候就用过，现在也一样的呢。{:4_204:}
小辣椒 发表于 2024-10-27 19:53
亲爱的你就是谦虚
还真没谦虚的呢，就是玩啊{:4_173:}
起个网名好难 发表于 2024-10-27 20:07
svg渐变字
………………
谢谢难难，我去试试。。。。
起个网名好难 发表于 2024-10-27 20:07
svg渐变字
………………
没试出来，不知道我什么地方又弄错了{:5_102:}
起个网名好难 发表于 2024-10-27 20:45
高，实在是高
我这么稀里糊涂的人，想高也高不了啊{:4_173:}
本帖最后由 起个网名好难 于 2024-10-27 22:41 编辑
红影 发表于 2024-10-27 21:14
没试出来，不知道我什么地方又弄错了
抄你的帖，没有音乐、没有视频的简化版。
<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);
}
}
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>
马黑黑 发表于 2024-10-27 16:57
挺好挺好
不好了，出大事儿了。发到论坛连小播都没了。。我今天无法处理，烧脑太过。。{:4_170:}
马黑黑 发表于 2024-10-27 16:58
不声明拿不到操作入口
原来如此，那天还纳闷。。看了这灌水记录就明白了。{:4_173:}
红影 发表于 2024-10-27 21:00
谢谢小文，自从喜欢上音画，无端感受到很多奇妙的美
现在恩师已经出神入画了！大赞！{:4_204:}{:4_187:}
花飞飞 发表于 2024-10-27 22:04
原来如此，那天还纳闷。。看了这灌水记录就明白了。
JS要操作元素，就必须知道是哪一个（些）元素。有id的元素直接操作id，没有的要获取一下
花飞飞 发表于 2024-10-27 22:03
不好了，出大事儿了。发到论坛连小播都没了。。我今天无法处理，烧脑太过。。
慢慢来不急
起个网名好难 发表于 2024-10-27 21:43
抄你的帖，没有音乐、没有视频的简化版。
太好了，去看过了，的确是渐变的了，谢谢难难{:4_187:}
今天有点晚了，空了我来好好学习一下。
小文 发表于 2024-10-27 22:42
现在恩师已经出神入画了！大赞！
哪里啊，我真的就跟在后面学的而已{:4_173:}
红影 发表于 2024-10-27 15:40
而且是无偿的。
是啊，无偿加班违反劳动法。
梦油 发表于 2024-10-28 11:30
是啊，无偿加班违反劳动法。
但为了怕丢掉工作，很多人只能忍了。
马黑黑 发表于 2024-10-27 22:53
慢慢来不急
昨天没空，一会就去整一整 。
马黑黑 发表于 2024-10-27 22:52
JS要操作元素，就必须知道是哪一个（些）元素。有id的元素直接操作id，没有的要获取一下
这个声明很有意思。先检个录，点个名，准备一会上场 。{:4_173:}
红影 发表于 2024-10-28 23:12
但为了怕丢掉工作，很多人只能忍了。
现在，求职的人很多，一个人辞职，马上就有人顶上来。
花飞飞 发表于 2024-10-29 09:47
这个声明很有意思。先检个录，点个名，准备一会上场 。
这是JS操作元素的流程。
id号唯一，所以当元素有id号，可以不声明。