小辣椒 发表于 2024-10-16 21:29
那不一样的，简单美也是很难做到的
主要是复杂的也驾驭不了啊
手机欣赏完美{:4_199:}
就是播放器在边上，手机看不见，其他都可以看见，歌词同步都可以看见{:4_178:}
小辣椒 发表于 2024-10-16 22:12
就是播放器在边上，手机看不见，其他都可以看见，歌词同步都可以看见
切换的图片能看到吗， 那些是美篇上的图片做了特殊处理在计算机上可见。
起个网名好难 发表于 2024-10-16 18:16
图片还是您给的， 谢谢了！
哦，是当时在美篇上传的吧。
梦江南 发表于 2024-10-17 09:29
哦，是当时在美篇上传的吧。
是啊，放在其他地方可能就丢失了
起个网名好难 发表于 2024-10-16 20:59
“难难”朋友别客气。
梦油 发表于 2024-10-17 10:59
“难难”朋友别客气。
https://pic.bbs.ybvv.com/forum/201810/31/113010mywz17yiazygjz7k.gif
起个网名好难 发表于 2024-10-17 10:44
是啊，放在其他地方可能就丢失了
美篇现在还存在吗？我怎么找不到了呢？
梦江南 发表于 2024-10-17 15:34
美篇现在还存在吗？我怎么找不到了呢？
在啊，不过图片又改了链接形式。
<style>
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#outBlk {
position: relative;
width: 1500px;
height: 844px;
margin: 90px 0 32px calc(50% - 831px);
overflow: hidden;
border-radius: 24px;
box-shadow: 4px 4px 10px black;
}
#showPic {
width: 720px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-20%, -50%);
overflow: hidden;
border-radius: 32px;
box-shadow: 2px 2px 5px black;
}
#processShow {
position: absolute;
left: 50px;
bottom: -10px;
width: 100px;
height: 100px;
cursor: pointer;
}
/** 不满意一般设置也可以调整下 */
.lrcShow {
font: normal 2.5em 微软雅黑;
pointer-events: none;
left: 20%;
bottom: 0px;
}
.lrcShow::before {
color: hsl(0, 50%, 50%);
}
#vid {
position: absolute;
width: 115%;
height: 100%;
object-fit: cover;
left: 0px;
}
</style>
<div id="outBlk">
<video id='vid' src="https://img.tukuppt.com/video_show/2475824/00/01/82/5b4acf0a4c1c7.mp4" loop autoplay muted></video>
<div id="showPic"></div>
<div id="processShow">
<svg stroke-width="5" viewBox="0 0 150 150">
<!-- 背景圆形 -->
<circle cx="75" cy="75" r="50" stroke="#ebeef5" fill="none"></circle>
<text x="50%" y="50%" stroke="#ffa020" text-anchor="middle" dominant-baseline="middle" stroke-width="1" style="font-size:24px;" id="procV">0%</text>
<!-- 进度条 -->
<circle class="process-circle" cx="75" cy="75" r="50" stroke="#ffa020" transform="rotate(-90 75 75)" fill="none" stroke-dasharray="314" stroke-dashoffset="314"></circle>
</svg>
</div>
<div class="lrcShow" data-lrc="菊花">菊花</div>
</div>
<script>
var pics = ["https://pic.imgdb.cn/item/670e0c67d29ded1a8ce76a56.jpg", "https://pic.imgdb.cn/item/670e0cb5d29ded1a8ce79a0b.jpg", "https://pic.imgdb.cn/item/670e0cd5d29ded1a8ce7af89.jpg", "https://pic.imgdb.cn/item/670e0cf7d29ded1a8ce7c551.png", "https://pic.imgdb.cn/item/670e0d1bd29ded1a8ce7df9b.png", "https://pic.imgdb.cn/item/670e0d42d29ded1a8ce7fb2f.png", "https://pic.imgdb.cn/item/670e0d67d29ded1a8ce8138d.png", "https://pic.imgdb.cn/item/670e0d88d29ded1a8ce82d25.png", "https://pic.imgdb.cn/item/670e0dacd29ded1a8ce845cb.png", "https://pic.imgdb.cn/item/670e0dd0d29ded1a8ce85f5a.png", "https://pic.imgdb.cn/item/670e0df2d29ded1a8ce87e88.png", "https://pic.imgdb.cn/item/670e0e1ad29ded1a8ce8980f.png", "https://pic.imgdb.cn/item/670e0e3ed29ded1a8ce8b4d5.png", "https://pic.imgdb.cn/item/670e0e62d29ded1a8ce8d6fb.png", "https://pic.imgdb.cn/item/670e0e85d29ded1a8ce8f079.png", "https://pic.imgdb.cn/item/670e0ea3d29ded1a8ce902d8.png", "https://pic.imgdb.cn/item/670e0edcd29ded1a8ce9283a.jpg", "https://pic.imgdb.cn/item/670e0ef6d29ded1a8ce93afa.jpg", "https://pic.imgdb.cn/item/670e0f14d29ded1a8ce95437.jpg", "https://pic.imgdb.cn/item/670e0f30d29ded1a8ce96a25.jpg", "https://pic.imgdb.cn/item/670e0f52d29ded1a8ce98413.jpg", "https://pic.imgdb.cn/item/670e0f6bd29ded1a8ce99a89.jpg", "https://pic.imgdb.cn/item/670e0f87d29ded1a8ce9b1c6.jpg", "https://pic.imgdb.cn/item/670e0fa4d29ded1a8ce9cc2e.jpg", "https://pic.imgdb.cn/item/670e0fc3d29ded1a8ce9e4b6.jpg", "https://pic.imgdb.cn/item/670e0fe1d29ded1a8ce9f9fa.jpg", ];
var sft = document.createElement('script');
sft.type = 'text/javascript';
sft.src = "https://file.uhsea.com/2410/34b933e409e019a1d30f535fa704e5122O.js";
//sf.src = "./genSVG.js";
sft.charset = "utf-8";
document.body.appendChild(sft);
sft.onload = () => {
let opts = {
width: 960,
height: 600,
showObj: showPic
};
genSVGtag(opts);
}
const processCircle = document.querySelector('.process-circle');
// 获取圆的周长
const circumference = processCircle.getTotalLength();
// 把周长赋值给 strokeDasharray
processCircle.style.strokeDasharray = circumference;
function setProcessCircle(percent = 0) {
// 动态计算 offset 赋值给 strokeDashoffset
// 为了支持 percent = 0 | '0%'，所以使用 parseInt 转换
processCircle.style.strokeDashoffset = circumference * (1 - parseInt(percent) / 100)
}
var scf = document.createElement('script');
scf.type = 'text/javascript';
scf.src = "https://file.uhsea.com/2410/739c572b5176f670f350463cf9ade957QB.js";
scf.charset = "utf-8";
document.body.appendChild(scf);
scf.onload = () => {
let lrctxt = `作词 : 野帆 \n作曲 : 林庭筠\n歌手：风飞飞\n
秋风吹起日渐凉\n百花失色菊花香\n菊花香 菊花黄\n
不与群芳争短长\n做人要象菊花样\n不畏艰苦 莫怀忧伤\n有始有终为理想\n就象菊花傲秋霜\n歌词编辑：梦江南\n秋风吹起日渐凉\n百花失色菊花香\n菊花香 菊花黄\n不与群芳争短长\n做人要象菊花样\n不畏艰苦 莫怀忧伤\n有始有终为理想\n就象菊花傲秋霜\n
`;
let paras = {
lrcTxt: lrctxt,
audioURL: "https://music.163.com/song/media/outer/url?id=232334.mp3",
}
let player = new lrcPlayerY(paras);
player.mObj.addEventListener('timeupdate', function() {
let processValue = player.mObj.currentTime / player.mObj.duration;
processCircle.style.strokeDashoffset = circumference * (1 - processValue);
procV.textContent = parseInt(processValue * 100) + '%';
});
processShow.onclick = () => {
player.mObj.paused ? player.mObj.play() : player.mObj.pause();
}
}
</script>
梦江南 发表于 2024-10-17 15:34
美篇现在还存在吗？我怎么找不到了呢？
您的菊花图片底色大多偏暗，明亮的底图对比反差大
醉美水芙蓉 发表于 2024-10-16 22:05
欣赏老师精彩特效！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
起个网名好难 发表于 2024-10-17 15:57
@import url(https://file.uhsea.com/2403/f45f79bba93cd62f8603eae6fa88eb78YS.css);
#outBlk...
这个好看！{:4_187:}
起个网名好难 发表于 2024-10-17 15:48
在啊，不过图片又改了链接形式。
您 能发一个美篇的地址给我吗？我进不去了。
起个网名好难 发表于 2024-10-17 15:58
您的菊花图片底色大多偏暗，明亮的底图对比反差大
这个动态背景图更漂亮！{:4_199:}
老师把代码改了，
梦江南 发表于 2024-10-17 17:32
您 能发一个美篇的地址给我吗？我进不去了。
没账号或忘了密码就只好仅去浏览别人的作品
https://www.meipian.cn/hot
梦江南 发表于 2024-10-17 17:56
老师把代码改了，
本来想改了里面的一些名称然后发到您那帖下面，结果还是冲突就发这里了。