清舟什么时候的生日啊，我好像错过了，生日快乐！
谢谢九，四年过一回的{:4_189:} 本帖最后由 绿叶清舟 于 2022-4-26 22:39 编辑 <br /><br /><style>
.mBox {
--w: 120px;
margin: auto;
margin-top: 100px;
display: flex;
justify-content: center;
align-items: center;
width: var(--w);
height: var(--w);
cursor: pointer;
position: relative;
animation: rot 2s linear infinite;
}
.zBox {
position: absolute;
display: block;
border-style: solid;
border-width: 1px;
border-color: transparent #fff729 transparent transparent;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -80px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=659 background=https://pic.imgdb.cn/item/626802da239250f7c5d13b8a.jpg>
<div style="position:absolute; LEFT: 600px; TOP: 250px;">
<div class="mBox"></div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<script>
let flag = true;
let ele = document.querySelector(".mBox");
let len = ele.clientWidth;
let zStr = "";
let all = 100;
let angle = Math.floor(360 / all);
for(j=0; j< all; j++){
let wh = Math.floor(len- j * (len / all));
zStr += `<span class="zBox" style="transform: rotate(${j*angle}deg);width: ${wh}px; height: ${wh}px"></span>\n`;
}
ele.innerHTML += zStr;
let au = document.createElement("audio");
au.src= "音乐";
au.loop = true;
au.autoplay = flag;
au.style.display = "none";
ele.appendChild(au);
if(!flag) ele.style.animationPlayState = "paused";
ele.onclick = function(){
flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play(),this.style.animationPlayState = "running",flag = true);
}
</script>
时间过得好快，马上五一了{:4_190:} 本帖最后由 绿叶清舟 于 2022-5-13 21:30 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -10px; width:800px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=1200 background=https://pic.imgdb.cn/item/627e578a09475431296b44f3.jpg>
<div class="sky"style="position: relative; LEFT: -200px; width:1200px;TOP: 450px" >
<div id="txtBox" style="margin: auto; color: #e5edf8; width: 400px; font-size: 1em;"></div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 1;
var str = "当不能改变世界的时候改变自己，是不是也是另一种放下呢。因势而变，因机而动。历来就是适者生存的世界不会因为任何因素而变化。地球环境每况愈下的当下权当这次是个压力测试这样是不是很Q?哈哈";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
</script>
本帖最后由 绿叶清舟 于 2022-6-19 12:53 编辑 <br /><br /><style>
.mama8 { position: relative; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62aeaa2809475431291b0722.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid8 { position: absolute; left: 52px; width: 908px; height: 700px; object-fit: cover; opacity: 0.6; clip-path: circle(80% at bottom) ;mix-blend-mode: exclusion;}
</style>
<div class="mama8">
<video class="vid8" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-6-14 17:47 编辑 <br /><br /><style>
.mama1 { position: relative; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62a8529909475431296335a5.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid1 { position: absolute; width: 1280px; height: 880px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
</style>
<div class="mama1">
<video class="vid1" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb95cd18008.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-8-3 10:22 编辑 <br /><br /> <style>
.mama3 { position: relative; left: -02px; width: 737px; height: 485px; background: #ccc url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fe61190ef76c6a7ef1a413655f0faaf51f3de665a.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657974855&t=e864386c7b36258c4919531724726184') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid3 { position: absolute; width: 750px; height: 550px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: multiply;}
/* 频谱+进度外层 */
.mama {
position: absolute;
left: 20px;
bottom: 40px;
width: fit-content;
height: fit-content;
cursor: pointer;
border-radius: 0 100%;
background: linear-gradient(transparent,green);
}
/* 频谱外层 */
.wrap {
width: 90px;
height: 60px;
box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
-webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,.01),#000);
position: relative;
}
/* 进度显示器 */
.mama meter {
width: 90px;
position: relative;
}
/* 频谱 */
.wrap span {
width: 6px;
height: 60px;
bottom: -8px;
display: inline-block;
position: absolute;
}
/* 频谱伪元素 顶帽 */
.wrap span::before {
position: absolute;
content: '';
width: inherit;
height: 3px;
background: #eee;
top: -3px;
animation: up 1s ease-in infinite;
}
/* 频谱顶帽动画 */
@keyframes up {
from { top: -6px; }
to { top: -16px; }
}
</style>
<div class="mama3">
<video class="vid3" src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4c3b328f2b6.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="mama">
<div class="wrap"></div>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
<div class="lrcbox">Loading ...</div>
</div>
<audioclass="aud" src="http://music.163.com/song/media/outer/url?id=19106378.mp3" autoplay="autoplay" loop="loop"></audio>
滤镜
本帖最后由 绿叶清舟 于 2022-6-16 20:49 编辑 <br /><br /><style>.mama3 { position: relative; left: -02px; width: 737px; height: 485px; background: #ccc url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fe61190ef76c6a7ef1a413655f0faaf51f3de665a.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657974855&t=e864386c7b36258c4919531724726184') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid3 { position: absolute; width: 750px; height: 550px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: multiply;}
</style>
<div class="mama3">
<video class="vid3" src="https://img.tukuppt.com/video_show/2422006/00/01/70/5b4c3b328f2b6.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-7-31 17:27 编辑 <br /><br /><style>
.vid5 { position:relative;left: -202px; width: 1200px; height: 560px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;}
#mypic { position: absolute; left: 112px; width: 1000px; height: 561px; left: 0px; top: 0px; border: none; cursor: pointer; mix-blend-mode: multiply;}
</style>
<div class="vid5">
<video class="vid5" src="https://img.tukuppt.com/video_show/7165162/00/19/71/5f115a12a96f6.mp4" autoplay="autoplay" loop="loop" muted="muted">
</video>
<img id="mypic" src="https://pic.imgdb.cn/item/62e644358c61dc3b8ec5be7d.gif" alt="" />
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-6-18 20:55 编辑 <br /><br />{:4_189:} 本帖最后由 绿叶清舟 于 2022-6-25 16:08 编辑 <br /><br /><style>
/* 帖子外层 */
.outer {
left: -214px; /* 水平定位*/
width: 1000px; /* 帖子宽度 */
height: 700px; /* 帖子高度 */
background: #ccc url('https://pic.imgdb.cn/item/62b2d063094754312920f5e6.jpg') no-repeat; /* 帖子背景 */
box-shadow: 0 4px 18px #000; /* 盒子阴影*/
position: relative; /* 重要 帖子定位依赖 */
overflow: hidden;
}
.vid10 { position: absolute; width: 1080px; height: 700px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}
/* 歌词同步显示框 */
.lrcbox {
transform: translate(20px, 20px); /* 定位 */
font: bold 1em sans-serif; /* 文本 */
color: #fff; /* 字体颜色 */
text-shadow: 1px 1px 2px #000; /* 文本阴影 */
background: black linear-gradient(transparent,lightgreen); /* 盒子背景*/
border-radius: 100% 0; /* 盒子边框 */
cursor: pointer; /* 手型指针 */
position: absolute; /* 关键 歌词显示框依赖于此 */
}
</style>
<div class="outer">
<video class="vid10" src="https://img.tukuppt.com/video_show/2418175/00/18/93/5ef7af74a3511.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="lrcbox">
<p id="geci" style="padding: 0;margin: 4px 0">Loading ...</p>
<meter id="meter" value="0" min="0" max="100" low="33" high="66" optimum="70"></meter>
</div>
</div>
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<script>
//盒子句柄
let lrcbox = document.querySelector('.lrcbox'),
geci = document.querySelector('#geci'),
aud = document.querySelector('#aud'),
meter = document.querySelector('#meter');
let prog = (tt, cc) => 100 * cc / tt;//计算播放进度
//歌词数组
let lrcAr = [
['7.72','我知道对 有什么不对'],
['9.75','我知道将军说的话 不一定对'],
['12.59','我知道对或错 我自己能分辨'],
['15.71','请你安静点 请你安静点'],
['19.58','我知道对 有什么不对'],
['21.64','我知道外国的月亮 没比较圆'],
['24.62','我知道 Yo Yo Yo'],
['26.25','不是我的语言'],
['27.51','请你安静点 请你安静点'],
['31.43','我是个小兵 我绷紧了神经'],
['33.99','在战场上拼命 听谁在发号施令'],
['37.25','将军在微醺 他方向分不清'],
['39.90','西方人念经 他全都听'],
['43.27','不同的肤色 说不同的话语'],
['45.86','相同的节奏 有不同的旋律'],
['49.04','自己的文化 要自己来说明'],
['51.73','自己的舞台 有我们自己顶'],
['55.02','我知道对 有什么不对'],
['57.24','我知道将军说的话 不一定对'],
['60.17','我知道对或错 我自己能分辨'],
['63.10','请你安静点 请你安静点'],
['66.90','我知道对 有什么不对'],
['69.10','我知道外国的月亮 没比较圆'],
['71.93','我知道 Yo Yo Yo'],
['73.21','不是我的语言'],
['75.01','请你安静点 请你安静点']
];
//歌词框单击事件
lrcbox.onclick = () => aud.paused ? aud.play() : aud.pause();
//audio进度监听事件
aud.addEventListener('timeupdate', () => {
meter.value = prog(aud.duration, aud.currentTime);
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr){
geci.innerHTML = lrcAr;
}
}
})
</script> 本帖最后由 绿叶清舟 于 2022-6-24 20:35 编辑 <br /><br /><style>
.mama11 { position: relative; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62b585200947543129a0eb99.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid11 { position: absolute; width: 1080px; height: 646px; object-fit: cover; opacity: 0.5; clip-path: inset(60px 0px -150px 0px); mix-blend-mode: screen;}
/* 值指的是 top, right, bottom, left 四个点 */
</style>
<div class="mama11">
<video class="vid11" src="https://img.tukuppt.com/video_show/15653652/01/00/69/6119cb81048a2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-6-25 16:27 编辑 <br /><br /><style>
.mama12 { position: relative; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62b6c2ee09475431293b19c0.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid12 { position: absolute; width: 1080px; height: 720px; object-fit: cover; opacity: 0.8; clip-path: circle(100% at bottom) ;mix-blend-mode: overlay;}
/* 文本层 */
.txtCeng {
margin: 10px auto 0;
width: 400px;
height: 200px;
line-height: 200px;
font-family: Arial, '微软雅黑';
font-size: 3em;
color: #eee;
text-align: center;
text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
background: ;
animation: chgColor 5s ease-in-out infinite alternate;
}
/* 文本层变色 */
@keyframes chgColor {
0% { color: navy; }
20% { color: green; }
40% { color: red; }
60% { color: olive; }
80% { color: olive; }
100% { color: tomato; }
}
</style>
<div class="mama12">
<video class="vid12" src="https://img.tukuppt.com/video_show/2629112/00/02/25/5b57d8c10132e.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div class="txtCeng">金戈铁马入梦来</div>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-6-29 11:31 编辑 <br /><br /><style>
.mama111 { position: relative; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62bbc1b51d64b07066da57d7.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid111 { position: absolute; width: 1020px; height: 640px; object-fit: cover; opacity: 0.4; clip-path: inset(65px 0px -150px 0px); mix-blend-mode:inherit; }
/* 值指的是 top, right, bottom, left 四个点 */
</style>
<div class="mama111">
<video class="vid111" src="https://img.tukuppt.com/video_show/15653652/00/79/66/60c69c42e465a.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-6-29 20:31 编辑 <br /><br /><style>
.mama21 { position: relative; left: -22px; width: 720px; height: 481px; background: #ccc url('https://pic.rmb.bdstatic.com/bjh/down/7962afd982b07c3cb5818a5c367463ec.jpeg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid21 { position: absolute; width: 720px; height: 480px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode:color;}
</style>
<div class="mama21">
<video class="vid21" src="https://img.tukuppt.com/video_show/15653652/01/14/63/6198b3cab3b8d.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio> 本帖最后由 绿叶清舟 于 2022-7-1 17:32 编辑 <br /><br /><style>
.papa { left: -200px; width: 1000px; height: 700px; background: rgba(0,0,0,.6) url('https://pic.imgdb.cn/item/62bd7c9b1d64b070665860f0.jpg') no-repeat center / cover; box-shadow: 0 2px 30px #000; overflow: hidden; position: relative; perspective: 1000px; }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; top: 10px; right: 10px; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: ghostwhite; background: rgba(255,255,255,.25); backdrop-filter: blur(2px); overflow: hidden; box-shadow: 1px 2px 2px #000; text-shadow: 1px 1px 1px #000; z-index: 100; }
.ball {
left: 400px;
top: 135px;
width: 262px;
height: 262px;
background: #ccc;
position: relative;
animation: rot 10s linear infinite;
border-radius: 50%;
background: snow linear-gradient(65deg, black, Olive, teal, LightGreen, green, DarkTurquoise, white);mask-image: radial-gradient(transparent 60%, #eee);-webkit-mask-image: radial-gradient(transparent 60%, #eee);position: absolute; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div class="papa">
<div class="ball"></div>
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div> 本帖最后由 绿叶清舟 于 2022-7-3 21:57 编辑 <br /><br /><style>
.papa { left: -302px; width: 1000px; height: 700px; border-radius: 6px; background: tan url('https://pic.imgdb.cn/item/62c19cd15be16ec74a290a77.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; left: 32px; top: 300px; width: 35%; height: 50%; transition: all 2s linear; mix-blend-mode: screen; }
.papa::before { background: tan url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20191218%2F5ad022ff37a341aa93877c7574e5251b.gif&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659446338&t=415785736cc79f9c7dc9fa1d9c7d7897') no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fww1.sinaimg.cn%2Flarge%2Fbd698b0fly1fndmqwg1mog20b405k4qp.gif&refer=http%3A%2F%2Fwww.sina.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659447702&t=d58626cbaccfcbc93a6ac75be05ce29d') no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%,-100%) rotate(15deg); }
.papa:hover::after { transform: translate(100%,-100%) rotate(-15deg); }
.papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: calc(50% - 130px); top: 10px; padding: 10px; font: normal 1em sans-serif; color: purple; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div class="papa">
</div>
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div>
本帖最后由 绿叶清舟 于 2022-7-7 21:39 编辑 <br /><br /><style>
#papa { left: -214px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62c6e0e3f54cd3f937e727f5.jpg') no-repeat center/cover; position: relative; }
.piece { position: absolute; left: 160px; bottom: 100px; width: 160px; height: 200px; background: #eee; box-shadow: 0 2px 4px #ccc; transform-origin: bottom; transition: all 1s; }
.piece:hover { box-shadow: 2px 2px 34px #fff; cursor: pointer; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: snow; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1; }
.playbox::before { position: absolute;content: '';margin: -20px;left: 0; top: 0; right: 0; bottom: 0;background: rgba(255,255,255,.45);filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
</style>
<div id="papa">
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let flags = [...Array(6)].map((x,y) => y*0);
let zIdx = 0, slip = 0;
let picAr = [
'https://pic.imgdb.cn/item/62c6e127f54cd3f937e78998.jpg',
'https://pic.imgdb.cn/item/62c6e13ff54cd3f937e7adeb.jpg',
'https://pic.imgdb.cn/item/62c6e153f54cd3f937e7cbfa.jpg',
'https://pic.imgdb.cn/item/62c6e167f54cd3f937e7e75e.jpg',
'https://pic.imgdb.cn/item/62c6e178f54cd3f937e80056.jpg',
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
Array.from({length: 5}).forEach((item,key) => {
item = document.createElement('img');
item.className = 'piece';
item.src = picAr;
item.style.zIndex = key + 1;
item.style.transform = 'rotate(' + (key*30-75) + 'deg)';
papa.appendChild(item);
});
let img = document.querySelectorAll('.piece');
img.forEach((item,key) => {
item.onclick = () => {
flag = flags;
if(flag == 0) {
item.style.zIndex = zIdx;
item.style.transform = 'translate(525px, 50px) scale(2.5)';
flags = 1;
zIdx ++;
} else {
item.style.zIndex = key + 1;
item.style.transform = 'translate(0,0) rotate(' + (key*30-75) + 'deg)';
flags = 0;
zIdx --;
}
}
});
let toMin = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script> 本帖最后由 绿叶清舟 于 2022-7-8 21:36 编辑
不捣乱
<style>
#papa { left: -202px; padding: 0; width: 1000px; height: 700px; background: #eee url('https://pic.imgdb.cn/item/62c83234f54cd3f9376ecfa4.jpg') no-repeat center/cover; box-shadow: 4px 4px 30px #000; border-radius: 6px; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: tomato; text-shadow: 1px 1px 1px #000; background: transparent; border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#playbox::before { position: absolute; content: ''; margin: -20px; left: 0; top: 0; right: 0; bottom: 0; background: rgba(255,255,255,.45); filter: blur(2px); z-index: -1; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#stage { position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); width: 400px; height: 400px; padding: 0; margin: 0; }
#stage::before { position: absolute; content: ''; left: -5px; top: -5px; bottom: -5px; right: -5px; box-shadow: 2px 2px 12px #000; transform: rotate(45deg); }
.piece {
position: absolute;
padding: 0;
margin: 0;
border:1px solid transparent;
}
@keyframes in {
80% { transform: scale(1) rotate(0); opacity: 1; }
100% { transform: scale(0) rotate(-360deg); opacity: 0; }
}
@keyframes out {
85% { transform: scale(1) rotate(0); opacity: 1; }
100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
</style>
<div id="papa">
<div id="stage"></div>
<div id="playbox">
<p id="geci" style="font-size: 1.2em">LRC Loading ... </p>
<p style="display: flex; align-items: center; gap: 4px; margin-top: 10px;">
<input id="btnplay" type="button" value=">" />
<input id="slider" type="range" min="0" max="100" value="0" />
<span id="per">0%</span>
</p>
</div>
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let picAr = [
'https://pic.imgdb.cn/item/62c8149bf54cd3f9373d3df4.jpg',
'https://pic.imgdb.cn/item/62c814b2f54cd3f9373d5d46.jpg',
'https://pic.imgdb.cn/item/62c814c5f54cd3f9373d7751.jpg',
'https://pic.imgdb.cn/item/62c814e0f54cd3f9373d9922.jpg',
'https://pic.imgdb.cn/item/62c814f6f54cd3f9373db463.jpg',
];
let lrcAr = [
['0.00','曲名: 情书'],
['20.00','歌手：张学友'],
['60.00','所属专辑：单身情人节'],
['170.00','感谢欣赏']
];
let ww = stage.clientWidth,
hh = stage.clientHeight;
let piecesX = 5,
piecesY = 5,
flag = 1,
idx = 0,
slip = 0;
let pw = ww / piecesX;
let ph = hh / piecesY;
let bgar = new Array;
for(j=0; j<piecesY; j++) {
for(k=0; k<piecesX; k++) {
let piece = document.createElement('span');
piece.className = 'piece';
piece.style.width = pw + 'px'
piece.style.height = ph + 'px';
piece.style.left = k * pw + 'px';
piece.style.top = j * ph + 'px';
bgar.push(k * pw + '|' + j * ph); //记录背景数据
stage.appendChild(piece);
}
}
let pieces = document.querySelectorAll('.piece');
function out_in() {
pieces.forEach((ele,key) => {
let ar = bgar.split('|');
ele.style.background = 'url(' + picAr + ') -' + ar+ 'px' + ' -' + ar + 'px no-repeat';
flag == 1 ? (ele.style.animation = 'out 8s 1s', flag = 0) : (ele.style.animation = 'in 8s 1s', flag = 1);
});
idx ++;
if(idx > picAr.length - 1) idx = 0;
setTimeout(out_in,9000);
}
slider.onmousedown = () => aud.pause();
slider.onchange = () => { aud.currentTime = slider.value * aud.duration / 100; aud.play(); }
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate', () => {
let prog = 100 * aud.currentTime / aud.duration;
slider.value = prog;
per.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr - slip){
geci.innerHTML = lrcAr;
}
}
});
let toMin = (sec) => {
if(!sec) return '0:00';
sec = parseInt(sec);
return parseInt(sec / 60) + ':' + parseFloat(sec % 60).toString().padStart(2,'0');
}
out_in();
</script>