来干点正事吧
本帖最后由 绿叶清舟 于 2022-9-5 20:19 编辑 <br /><br /><style>#papa { left: -214px; width: 1024px; height: 630px; background: #333 url('https://pic.imgdb.cn/item/6315e97f16f2c2beb19d3900.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#papa input { border: none; outline: none; opacity: .75; cursor: pointer; }
#papa p { margin: 0; padding: 0; }
#circle { left: 410px; top: 50px; width: 240px; height: 240px; border-radius: 50%; position: absolute; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; }
@keyframes flash { to { opacity: 0; } }
</style>
<div id="papa">
<div id="circle"></div>
</p>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=214567.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let slip = 0, idx = 0, total = 500, gap = 100;
let add = setInterval(addDot, gap), del;
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
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 = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
function addDot() {
let ele = document.createElement('span');
let ww = circle.offsetWidth / 2;
ele.className = 'star';
ele.style.animation = 'flash ' + 0.1 * num(10,50) + 's infinite';
let pos = calcCirclePos({x: ww, y: ww, r: num(0,ww - 2), a: num(0,360)});
ele.style.left = pos.xx + 'px';
ele.style.top = pos.yy + 'px';
circle.appendChild(ele);
idx ++;
if(idx >= total){
clearInterval(add);
idx = 0;
del = setInterval(delDot, gap);
}
}
function delDot() {
let ele = document.querySelector('.star');
if(ele) {
circle.removeChild(ele);
} else {
clearInterval(del);
add = setInterval(addDot,gap);
}
}
function calcCirclePos({x,y,r,a}) {
let xx = x + r * Math.cos((a * Math.PI) / 180);
let yy = y + r * Math.sin((a * Math.PI) / 180);
return {xx,yy};
}
</script>
本帖最后由 绿叶清舟 于 2023-2-18 10:52 编辑
纯CSS灯笼
文字竖排岳阳楼记
小雨特效 分享一个CSS+JS下雨特效
十字星光《午夜怨曲》代码解析 午夜怨曲（to 红影）
CSS：体验元素堆叠效果
CSS之边距与轮廓
CSS Table属性
CSS+HTML：流动边框
纯HTML+CSS实现锵锵三珠行
RGBA双色线性渐变调配器（定稿）
流动边框古风纯音乐
流动园珠大王叫我来巡山
园环播放器 願桜
无框播放器九妹（致小九）
线条之美
烟花烟花易冷
上下发散域外之音
夏日气泡
星星点点夜
流动星星王菲 - 流星
王菲 - 流星（拖尾版）
向上流动气泡繁华梦
烟花梦幻电音
巫娜·春城孤鹤
极简音画回家
旋转木马狞猫
鼠标跟随跟你走 粥菇凉可以顺向骑行去月亮了
追你（创意分享）
追随跳舞街
永不消逝的电波
园环歌词 空空如也
渐变园环播放器清零
园齿播放器HIGH歌
旋转水泡midnight bounce
伸缩气泡梦中的恋人
转动球（视频） 绿
开门卷珠帘（箫版）
竖立播放器愿——问好大猫咪
行走图片当你老了
弹跳球狐伎
云风
月亮走我不走
自转小球 太阳背后
滚珠播放器
蜡烛夜读（半自传体）
停电了点蜡烛听歌
杯子装不下海（预览）
大海装不进杯子（新杯测试）
粒子风
花潮电视开播（二）
CSS+JS：3d粒子一例
变色背景 宿命
开门效果卷珠帘（箫版）
图片翻转（二张） 颐和园主题曲
绿
枪 百发百中
频谱播放器 盛夏荷塘
飞雁 空气
页:
[1]