也曾年轻[特效音画] 烟雨荷塘
<meta charset="utf-8"><meta name="referrer" content="never">
<style>
#oBlk {
width:30vmax;height:56.9vmax;
position:relative;margin-left:50%;transform:translate(-50%);
overflow:hidden;border-radius:24px;
background-color:hsl(60, 15%, 90%);box-shadow:4px 4px 10px black;
#ctrlObj {width:3vw;height:3vw;overflow:hidden;border-radius:50%;position:absolute;right:1vw;bottom:1vw;animation: rot 5s linear infinite;box-shadow:2px 2px 5px black;}
#showSVG {width:100%;height:100%;}
}
@keyframes rot {to {transform:rotate(1turn)}}
</style>
<div id="oBlk">
<div id="showSVG"></div>
<img src="http://p2.music.126.net/wETVBkw7xEn7MBjcKrHq0g==/109951169642554367.jpg" id="ctrlObj" />
<audio src="https://music.163.com/song/media/outer/url?id=2162008755.mp3" loop autoplay id="aud"/>
</div>
<script>
const pics = [
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkkULPPFbCT5LgsTs5ZIUHpybsUZRjx1jdGjZskaSqcqcha2OobEicREibBBk6h50Cd2mwiblxToO5T5AvEs8XtUMmapBYicybNNibs/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OnZpUcuM0we01UZjIjun5Cjvicxk4UMFvSwsF9vEjYZv7Vp7NOtDH3Cp3dj9onPXmTxsKUCYHLU9rAibQmMx8Essib6PJdFrTL0RM/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OmOib6e9kTelJR3Lh4B8gzQXpVXOibGAfvQbrrqkH1y3bCQG6rOnMlzSIJiawCZD2BRJy0SDk9vr8OupmE7PwZPiaf0dVc3EicibR9Xs/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OmicXDhRI7hEH0b3NPb7IZ321K1iaJk6jBTzJgias2fH63AiafmDNibOJxUPMjJIxJ0bR56zwjqvUlmWpRUPMsfOnj7lic0H5ofJWkCg/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Oklkw2SjMhu4Tny8X58B0hujK9jQib0ibRL3yG9THWPxUq64fjARG7Y0K19v1srZUNgPU118E2WfUcMNUDvNYoHDYGibK0g33TPWA/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Omgqh7dfdDw0n7BY9zEribfKcNgXUmTZIBsfUAzIWpqoiaJPHAzFpx4ic9VEFBp277y95ZoMib4V8eLJia0ytvQD9BK6vDazF1HW6FU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlljM5IpW73K2Ar3CDVAAhfNgpsJrrZzpdKcHX9oOoIdzxb4dyicFvHqrqvvnicZ5M3UhbSs6KVqU2L5o3wNpibHLTyrIEePcWsh0/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlsWZAaSZ2q8NZme0BBH2rO0qmicRccibTA12awJTB5JljmQ3EQl1PHRc6Vd4JFxr0xb8hBG6sRCDsO4HHbK8ibMOk4DIcicQW6c5c/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkxJzpfcXEy8vlh19aQCQQAYz8IK2lF45P7jlcRGpybhlt4RmmyPoZVGJiaoWjmamqoKdu5tvlPicGW47ia1GAbEBBRUXpf8nqkPQ/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Olicg4kzQXh7jaKiadpIEWhWvH42wkQeFVQtLRarACDgiaLX8SZIIvTDorYQtHN6MI1GhiamRicAu6AdMEx03sJicV5ic6zR5Q48b58pU/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlCXlkiaAuFDkNznR4EpQCmA2sicjPSJiaeBrAZVXk7dDNgwSYQ6IgDXEs0IbvliaS9CV4OBP8W8SLd2jjLdU1yvWn3ibxzwFgSsYMc/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OkQNL4a8LUic04vAgR0Cck4QsnMuIDT3EjGgfiaRmxFRIl10b8mnVQ9YNTSICM05dHAdBBNrrQU9PlDVsG6M7hhRNY7YSHXKjkG8/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnO68lbGU8cUDUeria4GMhsF6vMWXncF2mRcbokDtQlWTAGMUOibwM34at8lVFP2TIANhgDvVFbUPc4A2zUwVKqsjQnLH3XXQSa4/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OluubXZI1XsCceAib63WEYseQJNEge7WWUnrR7c3T2B96BEAQ7nI3CkjAF2e2ibHkXDUIia6nbicVL9f8H6VsI3huFPI4uTibVHvX4Q/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlWoFrcv8LHmXERDbSJQY3JxIsvaveibSSMoCuHk3JUgfBcLeVcllYZ9py5WvZWahQHAPOAsFywDTpGODwZ7ykQwzx0cl687pw0/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmLlJdq7UZg2d3BmMDEqiaoH4JMMwDNBlcZmF4L9EmXJ0ZTPKvXy0qWkFrBLR5BSYuTk5LvmnVjuKzD6WAsBa1aqBhVibSUH0foo/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Okd3o4KcCULQJfL3veOK7xuB6dBnWUOMibicjrm1PwUiaaYSWicYOYQ6YvJEichdOaxrNsyrAcicIkqnvbBNh71j4s7uJ2vCSxzQCyJU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ok3DicER11RGr413PvhQC7a5Uvq1Z0p9hchjEBPp7EcVPpPOhYGH6ibVibFibzibaiaw08mF8fc4rqaFQaGwhyjx6IelAG3ndibkMUzYQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlLfHBFQoN7nkzY4eia87LDM5B376wMafqicoIZgTb2eicyd5DdPT4l9gQgaibhpicWIdqnrAQAEicIBmiczApArQfPNA3wCSvKthELos/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OnSlfTbhQP7IwEEp8uvl0vpBqVekgcDxpFGKEBuflawxRxJlf7OWovDDmQK3GmzGj1Diaia8nHcneBayqo2G67kfuXWtZj441r4M/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Okw2xSzpo8hakMt2h8n0OQ1ib7CU2dzeOLCSjnNnb9IU7qVvNFkbUMeWJibRkznHiapypibakTfbAXbdGhqK7UJtTQib22ka4ayVwicU/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OngCqAXGbqXugC0crWEdas6PACVPm8YDVSOP7x3AmKtkmu2X0YA0XKlouu198I04hutLeEHnb4iaq3qT6e78djDzNVHBcJrQUaM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlfPiaRsyUsb9EWtajx7nonDyKibTnfTWONmJrpicibcLonmltaxlicoakIEzdZM7rbyAs17pKWLmkwNPtwopda78dwViaqvvMusxkYc/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkY9vlZC3fo3laIGswoOvT6CaWJLkPN44ibpJ8tf7pdecouCU1bowhd2I71SMylnt5eQolhXdaEicdXiaAObaVgLqiaiapJvib4r6xTc/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OkEa6Y0Z421QyI7utnlYHqENCIVkDvq6DMVZIzEVP09SXaGZ1qBtfUQ1Rchyoa56SBdqXvItthMCJALbjicHZRS1opgLaiciaZiaibM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmwJdZCQeViayibacG3ibPUmhFuXmwTaf7bBGl8YIGmNyb1FYX7Jcv1er3REnhibWIzFnnfO1bm3cwZGgmUk1LGNoibY5qyGbMPQic4Y/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OlQZ8BnxiaHibae9WW1OHnibbO18fXDqQbiadMgerHmyzGC48XTvoXGjsTzTHicib5icwL4nvuZumEN6AQIAJhRDH5rE9iaVnESnwyooibk/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Olb8QJraDfvfYgMrzicXeAvDnoSjwhKnXQayOY6KxpdIumL7lFPT7e62MjPoVVcNE2OUNhudqWd8RdYicrOos176yibNUyxPAcKh8/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Omtoc0rjU0lRhOicam4k0oia6j3q7TQ9K2ibcseBvyBzibkTVnR6KyBYB2SvXkynB8apLEKMNIAgNKHMa9E48WGX55ibVukRI5RL1kM/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Ol2ll4gyZqiaMpK2XL0spX5e7vjYmSwuprBDgoVcb3MCgVJia3J2qwyvZDgr3NC1HKPlUVtshMb677h8tdNNJDMO8KIpcpiadqfzY/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6On8jEYhvwUvEXYibxHSlCA8WZ2xOcO58x9rOpcYK8uzgnF3ZncYm1vcJxiaF0FkUGZ6bictqQ9MVhdhKgUCJHHFnoQh4ic0zdia2vQw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6Om0QeHv06bWw4YjySnn5OuJeXiaeIV9blS7FtWHcTBBzVJCUOSxvW3l01tKIdaVjXpPT2Sles8uu3XXK7u14NMichjW8icRVu7DKE/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmgTrcHOQh10gQXdicbopbxRYHVZYGsbeK2SKbORkLNr6EWVjnDIr5o1wLdPeB3q08vswd1KOGeicobJ9GRHCooasRGk503aIDY0/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OkIg6BQ7RxlkP18zCFia4esxuEVUCkB1C4yk1HGXaGOTbBPH7BkJzPMbef5iaau1NbKDiasBbMYGAN4IShOfGQRyn94DVsV6MRmA4/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Ok987d3WhwcUBIBxNVchpy5L3DfDibQf2wDXNX25IR53hBDkZCbSMSFjFB0libVtlyDK3licQQmtm3OHDnNtEe0NAVyndRcpmZGQ0/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Onp4KN0xrRpYZ6iak7DKor86reLDpibAjl64RtXmabibaMoKR77QOT3TUUrHMtcIRMpdqdnGibqAP2fNeOMFoiamyqHBqIdD3X05IfI/640",
"https://mmbiz.qpic.cn/sz_mmbiz_png/dVs9AHZr6OmPDoibiabvZl261UOkOtfEIljUGfDgTH7K47VK8aE5rtPkTk3paTPF8vxMujUKJg0sYzUUd5VI5EM4ofG1PfQneySsw58TQxRtU/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OmzTcWat0piaYib6HG4tHqOmibTog8KDZ2sjiaBZUoK9LSpF0lLuHTnibYnsNnlcrnPQhXJGOM8JET9ZrnvWjzrWXfiaK9dLfXawQDp0/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6Olg577UGSGxJib4rMNhHxiaa6z8p1BKrEibzdRPpOJo9jAB7tF1SXUnHruIgNUtuBm6iaoyn1cHYXzXo1iaEACCbDZwL87PRvGnlakM/640",
"https://mmbiz.qpic.cn/mmbiz_png/dVs9AHZr6OlONVad31KCn4HmsoVBaiaxYzkyCqZwiawy9wsCPcia3H0JPgqtLKicvWsWXibFTyYfezk91KGAOkVvtEc2eCAktuRwrblLwHXL8BOM/640",
];
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
var svgObj = null;
let doAction = () => {
let opts = {width:showSVG.offsetWidth, height:showSVG.offsetHeight , showObj: showSVG, picAr: pics};
let sObj = new mkSVGPics(opts);
sObj.makeSVGsegment();
svgObj = document.querySelector('#'+sObj.getObjID());
}
loadJs("https://cccimg.com/down.php/af4d73a4781cb57f0e3e784a7383e369.js", doAction);
let runState = () => {
aud.paused
? (ctrlObj.style.animationPlayState = 'paused', svgObj.pauseAnimations())
: (ctrlObj.style.animationPlayState = 'running', svgObj.unpauseAnimations());
}
// 歌曲、歌词 及 动态元素 启/停控制
ctrlObj.onclick = () => {
aud.paused ? aud.play() : aud.pause();
}
aud.addEventListener('play', () => runState());
aud.addEventListener('pause', () => runState());
aud.play().catch(_ = () => runState());
</script>
页:
[1]