《玫瑰心语》 - 王馨/李青(svg路径试帖)
本帖最后由 亦是金 于 2023-4-24 09:32 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1882957">
<div style="width: 1100px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:20px;margin-LEFT: -250px;">
<style>
#papa {
left: 0px;
top: -80px;
width: 1100px;
height: 700px;
background: #ccc url('https://s1.ax1x.com/2023/04/24/p9ml43t.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
z-index: 1;
}
#mplayer {
position: absolute;
bottom: 0;
width: 300px;
height: 80px;
user-select: none;
display: grid;
place-items: center;
cursor: pointer;
}
#mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
#mplayer:hover #btnwrap { background: linear-gradient(to top right, purple, orange); border-radius: 50%; opacity: .75; }
#btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
#btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
#btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
#btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
#prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, #968b80, #0e5c80 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
.star5 { position: absolute; background: transparent; top: -0px; left: -0px; font: normal 18px /18px sans-serif; offset-distance: 0%; offset-path: path("m930.5,181c0,0 40,-58 39.5,-58c0.5,0 -19.5,-54 -20,-54c0.5,0 -66.5,-24 -67,-24c0.5,0 -74.5,9 -75,9c0.5,0 -61.5,43 -62,43c0.5,0 -16.5,45 -17,45c0.5,0 -8.5,45 -9,45c0.5,0 -7.5,73 -8,73c0.5,0 -20.5,53 -21,53c0.5,0 -29.5,29 -30,29c0.5,0 58.5,-26 58,-26c0.5,0 60.5,-11 60,-11c0.5,0 51.5,-14 51,-14c0.5,0 26.5,-37 26,-37c0.5,0 -10.5,-21 -11,-21c0.5,0 -23.5,3 -24,3c0.5,0 -12.5,9 -14.5,12c-2,3 -18,25 -18.5,25c0.5,0 1.5,23 1,23c0.5,0 25.5,4 25,4c0.5,0 36.5,-28 36,-28c0.5,0 38.5,-41 38,-41c0.5,0 -7.5,35 -8,35c0.5,0 14.5,16 14,16c0.5,0 24.5,1 24,1c0.5,0 24.5,-32 24,-32c0.5,0 0.5,-25 0,-25c0.5,0 -18.5,4 -18.5,5c0,1 2,18 1.5,18c0.5,0 34.5,5 34,5c0.5,0 40.5,-6 40,-6c0.5,0 14.5,-22 14,-22c0.5,0 -14.5,-7 -15.5,-7c-1,0 -22,6 -22.5,6c0.5,0 -5.5,16 -6.5,16c-1,0 2,30 1.5,30c0.5,0 30.5,2 30,2c0.5,0 58.5,-15 58,-15c0.5,0 30.5,-37 30,-37c0.5,0 3.5,-35 3,-35c0.5,0 -32.5,-29 -33,-29c0.5,0 -35.5,-7 -36,-7c0.5,0 -47.5,10 -48,10c0.5,0 -43.5,21 -43.5,21z"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
@keyframes move{to{offset-distance:100%}}
</style>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -350px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:36px;">《玫瑰心语》</span>
<span style="color:#3d46f7;"><span style="font-size:20px;">- 王馨/李青</span></div>
<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 900px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:26px;">亦是金在线音乐</span></span></span></p></div>
</style>
<div id="papa">
<div id="mplayer">
<div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
<div id="prog">00:00 | 00:00</div>
</div>
</div>
<script>
let mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 1}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '\u2743';
ele.style.cssText += `--ss: ${key * 0.5}s; color: #fef9e8;`;
papa.appendChild(ele);
});
aud.src = 'https://www.qqmc.com/mp3/music14861334.mp3';
aud.autoplay = true;
aud.loop = true;
btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
prog.style.background = 'linear-gradient(90deg,#968b80, #0e5c80 ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
};
</script></td></tr></table>
这个帖子也弄了个可以绕着文字痕迹飞行的小图标，不知道这个路径是怎么弄出来的。是在那个在线SVG里一个个在底图上取点么，可是很多底图比那里的舞台大的，这样能取出准确的路径么{:4_173:} 好甜蜜的歌曲，欣赏亦是金老师好帖{:4_199:} 红影 发表于 2023-4-24 10:25
好甜蜜的歌曲，欣赏亦是金老师好帖
问好红影！谢谢欣赏！{:4_187:} 红影 发表于 2023-4-24 10:24
这个帖子也弄了个可以绕着文字痕迹飞行的小图标，不知道这个路径是怎么弄出来的。是在那个在线SVG里一个个 ...
亲爱的，刚看见黑黑在清舟帖的回答你去看看 好美的制作，这个路径我也是不会，向前辈学习{:4_187:} 红影 发表于 2023-4-24 10:24
这个帖子也弄了个可以绕着文字痕迹飞行的小图标，不知道这个路径是怎么弄出来的。是在那个在线SVG里一个个 ...
我说说svg路径动画制作点滴经验：我是用在线svg绘制工具：http://www.zuohaotu.com/svg/ 制作的。
本帖最后由 亦是金 于 2023-4-24 18:12 编辑
https://s1.ax1x.com/2023/04/24/p9mrsJ0.jpg
路径中的第一个数值（m1000.5）确定动画起始时左右的位置，路径中的第二个数值（185c0）确定动画起始时上下的位置，仅根据需要调整这两个数值，其余的数值不要改动。就可以精准定位移动路径了！
把路径的数据串，复制到帖子中替换即可！
真美的特效，欣赏点赞！{:4_187:} 梦缘 发表于 2023-4-24 16:57
真美的特效，欣赏点赞！
问好梦缘！祝你欣赏愉快！{:4_187:} 亦是金 发表于 2023-4-24 11:43
问好红影！谢谢欣赏！
问好亦是金老师。对了，现在换头像很方便了，您弄个头像如何？{:4_204:} 小辣椒 发表于 2023-4-24 11:46
亲爱的，刚看见黑黑在清舟帖的回答你去看看
好的。这里亦是金老师也给出答案了{:4_173:} 亦是金 发表于 2023-4-24 12:04
路径中的第一个数值（m1000.5）确定动画起始时左右的位置，路径中的第二个数值（185c0）确定动画起始时 ...
谢谢亦是金老师，刚才去试了一下，我弄出来了，太好了{:4_205:}{:4_199:} 这个做的漂亮{:4_199:} 红影 发表于 2023-4-24 20:21
问好亦是金老师。对了，现在换头像很方便了，您弄个头像如何？
谢谢！一个糟老头，模样难看，不换头像了！{:5_111:} 红影 发表于 2023-4-24 20:42
谢谢亦是金老师，刚才去试了一下，我弄出来了，太好了
这个制作对红影，是小菜一碟！{:4_171:} 冬天的雨 发表于 2023-4-24 21:24
这个做的漂亮
问好冬天的雨！谢谢欣赏！{:4_191:} 亦是金 发表于 2023-4-25 10:11
问好冬天的雨！谢谢欣赏！
不客气{:4_187:} 这个有播放器的
页:
[1]
2