大猫咪 发表于 2022-5-14 13:07
清舟字怎么出不来了
我上面还有一个一样的贴子，字跑到上面去了{:4_189:}
本帖最后由 绿叶清舟 于 2022-5-17 21:31 编辑 <br /><br /><style type="text/css">
.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#waiDiv { margin:10px; padding:8px; width:400px; background:#696969; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:400px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:392px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div style="position:relative; left:-200px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1000px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
<div align="center" style="border-radius:6px;width:100%;background:#177B93 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">
<div align="center" style="border-radius:1px;width:95%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>
<DIV align=center><br><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmanhua.qpic.cn%2Fhorizontal%2F0%2F29_21_53_5d8e5746e5513a05012ea4b1a8e57831_1606658019290.png%2F0&refer=http%3A%2F%2Fmanhua.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655385444&t=15e7684f7779504a9fa3679cb585c1e9" width=500 _height="500"><br><br><br></div>
<section data-role="outer" label="Powered by 135editor.com" style="">
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107201">
<section style="text-align: center;margin: 10px auto;">
<section style="display:flex;justify-content: center;align-items: flex-end;"><section class="assistant" style="box-sizing:border-box;width: 75px;flex-shrink: 0;"><img class="assistant" style="box-sizing:border-box;vertical-align:inherit;width: 100%; display: block;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvSmFGdlB2dkEySjA1eXNNZVFldVh4aWNhb2xtVXRwMGhObEg4MzdENzRTYXpGM0VMWmFUVkx3WE9EZmZZaWJHeFdWcGFwTzI4eWliZGljaWFyNmdNYUllYnZpYUEvMD93eF9mbXQ9cG5n" data-ratio="0.52" data-w="113" data-width="100%"></section><section class="135brush" data-brushtype="text" style="font-size: 14px;letter-spacing: 1.5px;color: #5f7ad2;margin: 0 0 5px -30px;" hm_fix="320:609">施艾敏
</section>
</section>
</section>
</section>
<div><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</div>
<br><br><br><br><br><br>
<DIVstyle="position: relative; opacity: 0.5; LEFT: 100px; TOP: -230px">
<div id="waiDiv">
<div id="audDiv">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu"><div id="jd-go"></div></div>
</div>
<input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
<input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
<input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
<div id="add1">+</div>
</div>
<div id="mLiDiv"></div>
<div id="prompt">
<div>添歌</div>
<input type="text" id="mName" placeholder="歌曲名称" /><br />
<input type="text" id="mUrl" placeholder="歌曲地址" /><br />
<div style="text-align:center;">
<input id="subMe" type="button" value=" 添加 " />
<input id="cancelMe" type="button" value=" 算了 " />
</div>
</div>
</div>
</div>
<script>
//音乐数据 注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
["http://music.163.com/song/media/outer/url?id=289350.mp3","传奇"],
["http://music.163.com/song/media/outer/url?id=289353.mp3","暗恋"],
["http://music.163.com/song/media/outer/url?id=289354.mp3","你是我心内的一首歌"],
["http://music.163.com/song/media/outer/url?id=5235667.mp3","我记得我爱过"],
["http://music.163.com/song/media/outer/url?id=289348.mp3","背叛"],
["http://music.163.com/song/media/outer/url?id=289351.mp3","喜欢两个人"],
["http://music.163.com/song/media/outer/url?id=289344.mp3","Forever love"],
["http://music.163.com/song/media/outer/url?id=289422.mp3","寻找幸福"],
["http://music.163.com/song/media/outer/url?id=289439.mp3","蝴蝶"],
];
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;
function iPlay(idx){ //播放函数
playIdx = idx;
aud.src = muAr;
aud.play();
aud.addEventListener('timeupdate', tmMsg, true);
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
btn.style.animationPlayState="running";
nameRed(playIdx);
}
function howplay(){ //单曲&轮播处理
dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
prom.style.display = "none";
}
function playNext(){ //处理下一首
if(aud.paused) iPlay(playIdx);
playIdx += 1;
if(playIdx >= muAr.length) playIdx = 0;
}
function nameRed(){ //歌单着色
for(k=0;k<muAr.length;k++){
let listId = "list" + k;
document.getElementById(listId).style.removeProperty("color");
}
listId = "list" + playIdx;
document.getElementById(listId).style.color = "red";
}
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
if(jd>0) {
jindu.innerHTML = "- " + auMs +":" + auSs;
jindu.style.backgroundSize = jd+ "% 8px";
}
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取元素总偏移量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ //光盘按钮点击事件
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌
subMe.onclick = function(){ //加歌并播放新歌
let uri = document.getElementById('mUrl');
let name = document.getElementById('mName');
let tnum = muAr.length;
let str1 = uri.value.trim();
let str2 = name.value.trim();
if(str1 !="" && str2 != ""){
muAr = ;
mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
iPlay(tnum);
uri.value = "";
name.value = "";
}
prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>
本帖最后由 绿叶清舟 于 2022-5-18 22:02 编辑
<div style="position:relative; left:-200px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1000px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
<div align="center" style="border-radius:6px;width:100%;background:#3C3C3C url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">
<div align="center" style="border-radius:1px;width:93%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>
<DIV align=center><br><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.missevan.com%2Fcoversmini%2F202004%2F25%2Fe62ed94f5d242de9a9af4683d9e6f64e235308.jpg&refer=http%3A%2F%2Fstatic.missevan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654916832&t=d210f4df2eb842c927de346e5f085e54" width=500 _height="500"><br><br><br>
<section data-role="outer" label="Powered by 135editor.com" style="">
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107201">
<section style="text-align: center;margin: 10px auto;">
<section style="display:flex;justify-content: center;align-items: flex-end;"><section class="assistant" style="box-sizing:border-box;width: 75px;flex-shrink: 0;"><img class="assistant" style="box-sizing:border-box;vertical-align:inherit;width: 100%; display: block;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvSmFGdlB2dkEySjA1eXNNZVFldVh4aWNhb2xtVXRwMGhObEg4MzdENzRTYXpGM0VMWmFUVkx3WE9EZmZZaWJHeFdWcGFwTzI4eWliZGljaWFyNmdNYUllYnZpYUEvMD93eF9mbXQ9cG5n" data-ratio="0.52" data-w="113" data-width="100%"></section><section class="135brush" data-brushtype="text" style="font-size: 14px;letter-spacing: 1.5px;color: #5f7ad2;margin: 0 0 5px -30px;" hm_fix="320:609">一荤一素 - 毛不易
</section>
</section>
</section>
</section>
<br><div id="txtBox" style="margin: auto; width: 400px; font-size: 1em;"></div><br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="音乐 地址"></iframe>
<br><br></DIV>
</div>
</div>
</div>
<br><br><br><br><br><br>
<script language="javascript">
var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "想好的试试白酒酱料整个小炒肉的翻看冰箱发现蕃茄得赶紧的吃了，改做了罗宋汤。汤里该放卷心菜的可是那份菜心快不行了必须得先吃了再加今天蔬菜得超标了。吃完早餐暖的壶到现在茶还没泡上。洗着的衣服啥时停了都不知道，只得重新再洗一遍。今天这是啥日子来的，得去查查黄历。发来的物资照例午餐肉和那半根红肠投喂了邻居家的狗，那个象腌过的黄瓜，被切去了头的萝卜，和长得象韮菜的蒜苗直接扔了出去。或许又会被说上海人怎样怎样，可又知不知道咱也曾经珍惜过，算啦只想说那汤好鲜，昨天整的红糖糍粑早餐就吃了些，比纯糯米粉的口感强了很多，以后再做南瓜饼时就这么整了。";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
</script>
本帖最后由 绿叶清舟 于 2022-5-21 17:52 编辑 <br /><br /><style>
.blood {
width: 80px;
height: 60px;
left: 710px;
top: 988px;
border-radius: 20% 100%;
background: #;
transform: skewY(10deg);
position: absolute;
}
.blood::before ,.blood::after {
position: absolute;
content: "";
left: 0px;
top: 0px;
width: 20px;
height: 30px;
border-radius: 50%;
background: rgba(139,0,0,.65);
transform: skew(-15deg) translate(0, 0);
filter: blur(2px);
animation: move 7.5s ease-in-out infinite;
}
.blood::after {
animation: move 7.5s ease-in-out 1s infinite;
}
@keyframes move {
80% { transform: translate(30px, 10px); }
93% { transform: translate(70px, 30px); opacity: 1; }
100% { transform: translate(70px, 350px); opacity: 0; }
}
</style>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -250px; width:1100px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=1178 background=https://pic.imgdb.cn/item/6288b0c60947543129222f4a.jpg></TD></TR>
<TR><TD height=1180 background=https://pic.imgdb.cn/item/6288b0dd0947543129224259.jpg></TD></TR>
<TR><TD height=1179 background=https://pic.imgdb.cn/item/6288b0f109475431292250c7.jpg>
<div class="blood"></div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<script>
let aud = document.createElement('iframe');
aud.src = '音乐';
aud.style.display = 'none';
document.querySelector('.outer').appendChild(aud);
</script>
本帖最后由 绿叶清舟 于 2022-5-26 16:50 编辑 <br /><br /><style type="text/css">
.dDiv {
width: 800px;
height: 500px;
background: url('https://pic.imgdb.cn/item/628f3c400947543129046dc7.jpg') no-repeat;
position: relative;
left: -18px;
top: 80px;
}
.iRo {
width:90px;
height:98px;
cursor: pointer;
position: relative;
left: 200px;
top: 250px;
transition: linear transform 1s;
}
.iRo:hover {
transform: rotate(360deg);
}
</style>
<div class="dDiv">
<img class="iRo" alt="" src="https://s2.xoimg.com/i/2021/12/12/sauz1d.gif">
</div>
本帖最后由 绿叶清舟 于 2022-5-28 11:14 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/629192df0947543129119a73.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62919301094754312911c2e7.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62919316094754312911da9f.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
{:4_187:} 清舟好
本帖最后由 绿叶清舟 于 2022-6-13 17:22 编辑 <br /><br /><style>
.mama {
left: -200px;
TOP: -600px;
width: 1000px;
height: 700px;
background: radial-gradient(100% 225% at 100% 0%, #FAFF00 0%, #00a0e0 100%),
linear-gradient(235deg, #FF7A00 0%, #00a0e0 100%),
linear-gradient(20deg, #241E92 0%, #241E92 30%, #5432D3 calc(30% + 1px), #5432D3 35%, #7B6CF6 calc(35% + 1px),
#7B6CF6 50%, #E5A5FF calc(50% + 1px), #E5A5FF 100%),
linear-gradient(120deg, #110133 0%, #110133 40%, #00918E calc(40% + 1px), #00918E 60%, #4DD599 calc(60% + 1px), #4DD599 70%, #FFDC34 calc(70% + 1px), #FFDC34 100%);
background-blend-mode: overlay, hard-light, overlay, normal;
border: 1px dotted gold; position: relative; }
</style>
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 100px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/62a4a0520947543129061807.jpg>
</TD></TR>
</table>
<div style="opacity: 0.6;" class="mama">
</div>
本帖最后由 绿叶清舟 于 2022-6-14 12:00 编辑 <br /><br /><style>
.vid { position: absolute;LEFT: -200px; width: 1000px; height: 680px; object-fit: cover; opacity: 0.9; clip-path: circle(80% at bottom) ;mix-blend-mode: exclusion;}
</style>
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62a803be0947543129ef0c7f.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62a803d60947543129ef277a.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62a803e90947543129ef3b69.jpg>
<video class="vid" style="position: relative; LEFT: 0px; TOP: 160px" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbb3034ad7.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
本帖最后由 绿叶清舟 于 2022-6-17 17:29 编辑 <br /><br /><style>
.vid1 { position: absolute; width: 1000px; height: 580px; object-fit: cover; opacity: 1; clip-path: circle(75% at TOP) ;mix-blend-mode: screen;}
.vid2 { position: absolute; width: 1000px; height: 380px; object-fit: cover; opacity: 0.8; clip-path: circle(80% at bottom) ; mix-blend-mode: screen;}
</style>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62ac145c0947543129e2643e.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62ac14710947543129e28118.jpg></TD></TR>
<TR><TD height=1000 background=https://pic.imgdb.cn/item/62ac14830947543129e29983.jpg>
</TD></TR>
</table></div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<video class="vid1" style="position: relative; LEFT: -200px; TOP: -2880px" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vid2" style="position: relative; LEFT: -200px; TOP: -780px" src="https://img.tukuppt.com/video_show/15653652/01/22/70/620f134e2c971.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
本帖最后由 绿叶清舟 于 2022-6-25 20:56 编辑 <br /><br /><style>
.vid11 { position: absolute;
width: 1030px; height: 710px; object-fit: cover; opacity: 0.9; clip-path: circle(95% at TOP);mix-blend-mode: hard-light;}
</style>
<DIV align=center style="position: relative; overflow: hidden; LEFT: -200px; width:1000px;TOP: 180px">
<tableborder="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=712 background=https://pic.imgdb.cn/item/62b65fa90947543129bbda7f.jpg></TD></TR>
<TR><TD height=713 background=https://pic.imgdb.cn/item/62b65b290947543129b55f61.jpg></TD></TR>
<TR><TD height=712 background=https://pic.imgdb.cn/item/62b65b570947543129b5a541.jpg>
<video class="vid11" style="position: relative; overflow: hidden; LEFT: -0px; TOP: -1473px" src="https://img.tukuppt.com/video_show/2629112/00/02/22/5b57e35e5c42b.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</TD></TR>
</table></div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<BR><BR><BR>
本帖最后由 绿叶清舟 于 2022-6-28 20:15 编辑 <br /><br /><style>
.papa { left: -200px; width: 1000px; height: 700px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62b824e32f259190880b17e7.jpg') no-repeat center / cover; overflow: hidden; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .6; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { margin: auto; position: relative; top: 20px; opacity: .2; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; 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; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes opa { to { opacity: 0; } }
</style>
<div class="papa">
<div class="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:0 | 0:0</span>
</p>
</div>
<img src="https://pic.imgdb.cn/item/62b826ae2f259190880d3fa4.png" alt="" style="position: absolute; top:0; left:0; width: 100%; height: 100%; animation: opa 4s infinite alternate;" />
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div>
<script>
let slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0;
let lrcAr = [
['0.00','纤云弄巧，飞星传恨，银汉迢迢暗度'],
['60.58','金风玉露一相逢，便胜却人间无数。'],
['100.00','柔情似水，佳期如梦，忍顾鹊桥归路。'],
['160.00','两情若是久长时，又岂在朝朝暮暮。']
];
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');
}
</script>
本帖最后由 绿叶清舟 于 2022-6-28 20:20 编辑 <br /><br /><style>
.papa1 { left: -200px; width: 1000px; height: 700px; background: rgba(0,0,0,.4) url('https://pic.imgdb.cn/item/62baef2a1d64b07066ee5196.jpg') no-repeat center / cover; overflow: hidden; box-shadow: 0 4px 24px #000; position: relative; }
.papa input { border: none; outline: none; opacity: .6; cursor: pointer; }
.papa p { margin: 0; padding: 0; }
.playbox { margin: auto; position: relative; top: 20px; opacity: .2; padding: 10px; width: fit-content; font: normal 1em sans-serif; color: snow; 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; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
@keyframes opa { to { opacity: 0; } }
</style>
<div class="papa1">
</p>
<img src="https://pic.imgdb.cn/item/62baefaa1d64b07066eefafe.jpg" alt="" style="position: absolute; top:0; left:0; width: 100%; height: 100%; animation: opa 6s infinite alternate;" />
<img src="https://pic.imgdb.cn/item/62baefc21d64b07066ef1a65.jpg" alt="" style="position: absolute; top:0; left:0; width: 100%; height: 100%; animation: opa 16s infinite alternate;" />
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
</div>
本帖最后由 绿叶清舟 于 2022-7-5 16:23 编辑 <br /><br /><style>
.papa { left: -200px; width: 1000px; height: 700px; background: purple url('https://pic.imgdb.cn/item/62c3c3b95be16ec74a52a6d3.jpg') no-repeat center/cover; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; width: 50%; height: 100%; transition: all 2s linear; }
.papa::before { background: tan url('https://pic.imgdb.cn/item/62c3c3dc5be16ec74a52cef1.jpg')no-repeat center/cover; }
.papa::after { left: 50%; background: tan url('https://pic.imgdb.cn/item/62c3c3f75be16ec74a52ec6e.jpg')no-repeat center/cover; }
.papa:hover::before { transform: translate(-100%); }
.papa:hover::after { transform: translate(100%); }
.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: lightblue; background: transparent;border-radius: 8px; overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 1000; }
.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 class="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 slider = document.querySelector('#slider'),
aud = document.querySelector('#aud'),
per = document.querySelector('#per'),
btnplay = document.querySelector('#btnplay'),
geci = document.querySelector('#geci');
let slip = 0; //误差值
let lrcAr = [
['0.00','山海入梦来'],
['2: 20','原唱: 邹秋实'],
['2.20','演奏 - 呼和'],
['222.27','歌词n']
]
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');
}
</script>
本帖最后由 绿叶清舟 于 2022-7-8 21:49 编辑 <br /><br /><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);border-radius: 58px;}
.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>
本帖最后由 绿叶清舟 于 2022-7-19 10:49 编辑 <br /><br /><tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/62d52a2ff54cd3f9371c4843.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<audiocontrols="controls" autoplay="autoplay" loop="loop" src="音乐" type="audio/mpeg" hidden="true"></audio>
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/62d90b6ff54cd3f93719ade4.jpg>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<audiocontrols="controls" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=196669.mp3" type="audio/mpeg" hidden="true"></audio>
本帖最后由 绿叶清舟 于 2022-7-22 20:02 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/62da8f60f54cd3f937c370d6.jpg>
<div style="position:absolute; LEFT: 80px; TOP: 530px;">
<div id="txtBox" style="margin: auto; 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 = 0;
var str = "韩信点兵恢弘制作风云激荡、荡气回肠，那一段历经上千年的集体传承，重温千年风云变幻的磅礴历史，扒开层层迷雾，让那些遗忘的文明一一呈现在听众的耳膜中。这是中原的一个传奇，而韩信点兵更是一张不朽的经典。为了更好的表达这部音乐史诗作品的尊崇身份，本专辑的录制邀请了数十位中西乐演奏家助阵。常静的古筝，姜彦的琵琶，穆祥征的三弦，杜聪的尺八，箫，竹笛，尚魏的打击乐，中国国家交响乐团，中国爱乐乐团，北师大合唱团等众多演奏家们，这些都是举世闻名，琴韵倾城的大师级乐手，此番悉数揽至西域和中原疆域，指点江山激扬青史。 ";
setInterval(function(){
txtBox.innerHTML = str.substring(0, idx) + "|";
idx += 1;
if(idx > str.length) idx = 0;
}, 200);
</script>
<style>
.vid11 { position: absolute; width: 1000px; height: 580px; object-fit: cover; opacity: 1; clip-path: circle(75% at TOP) ;mix-blend-mode: screen;}
</style>
<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=2308 background=https://pic.imgdb.cn/item/62e0f480f54cd3f937977c38.jpg></TD></TR>
</TD></TR>
</table></div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<video class="vid11" style="position: relative; LEFT: -200px; TOP: -2880px" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
本帖最后由 绿叶清舟 于 2022-8-12 19:50 编辑
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY>
<TR><TD height=700 background=https://pic.imgdb.cn/item/62e3d81df54cd3f937ce06ef.jpg></TD></TR>
</TD></TR>
</table><BR><BR><BR><BR><BR><BR>
<audio class="aud" src="http://music.163.com/song/media/outer/url?id=33891564.mp3" autoplay="autoplay" loop="loop"></audio>烟花三月