本帖最后由 绿叶清舟 于 2022-7-25 19:37 编辑 <br /><br /><style>
#papa { left: -214px; width: 1000px; height: 700px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62de7d07f54cd3f937a9056e.jpg'); box-shadow: 3px 3px 20px #000; perspective: 3000px; font: bold 1.2em / 30px sans-serif;text-shadow: 1px 1px 1px black; color: snow; position: relative; }
#msgbox {position: absolute; bottom: 25px; }
#mama { position: absolute; top: 310px; width: 300px; height: 300px; animation: rot 20s linear infinite; transform-style: preserve-3d; }
#mama:hover { animation-play-state: paused; cursor: pointer; }
.pics { position: absolute; width: 100%; height: 100%; transition: all .5s; }
.pics:hover { box-shadow: 14px 14px 20px #000; top: 10px; filter: grayscale(100%); }
#mama img:nth-child(1) { transform: rotateY(0deg) translateZ(400px); }
#mama img:nth-child(2) { transform: rotateY(60deg) translateZ(400px); }
#mama img:nth-child(3) { transform: rotateY(120deg) translateZ(400px); }
#mama img:nth-child(4) { transform: rotateY(180deg) translateZ(400px); }
#mama img:nth-child(5) { transform: rotateY(240deg) translateZ(400px); }
#mama img:nth-child(6) { transform: rotateY(300deg) translateZ(400px); }
#playbox { position: absolute; left: 10px; top: 10px; padding: 10px; display: flex; gap: 8px; z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; outline: none; border: none; }
#btnplay:hover { background: #aaa; color: #ff0000; cursor: pointer; }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>
<div id="papa">
<div id="mama">
<img class="pics" src="https://pic.imgdb.cn/item/62de7f69f54cd3f937b51c86.gif" alt="" />
<img class="pics" src="https://pic.imgdb.cn/item/62de7f97f54cd3f937b5fecb.gif" alt="" />
<img class="pics" src="https://pic.imgdb.cn/item/62de7fb9f54cd3f937b6b163.gif" alt="" />
<img class="pics" src="https://pic.imgdb.cn/item/62de7f69f54cd3f937b51c86.gif" alt="" />
<img class="pics" src="https://pic.imgdb.cn/item/62de7f97f54cd3f937b5fecb.gif" alt="" />
<img class="pics" src="https://pic.imgdb.cn/item/62de7fb9f54cd3f937b6b163.gif" alt="" />
</div>
<div id="msgbox">。</div>
<div id="playbox"><input id="btnplay" type="button" value=">" /><span>旋转木马 - 吴思瑶</span></div>
</div>
<audio id="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<script>
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
</script>
<style type="text/css">
.dDiv {
width: 1000px;
height: 1949px;
background: url('https://pic.imgdb.cn/item/62cebc34f54cd3f93744a885.jpg') no-repeat;
position: relative;
left: -200px;
top: 80px;
}
.iRo {
width:90px;
height:98px;
cursor: pointer;
position: relative;
left: 200px;
top: 1250px;
transition: linear transform 1s;
}
.iRo:hover {
transform: rotate(360deg);
}
</style>
<div class="dDiv">
<img class="iRo" alt="" src="https://pic.imgdb.cn/item/62cebc64f54cd3f93744fb34.gif">
</div>
本帖最后由 绿叶清舟 于 2022-7-17 15:24 编辑
<style>
#papa1 { left: -214px; width: 1000px; height: 700px; box-shadow: 4px 4px 30px #000; border-radius: 6px; overflow: hidden; position: relative; }
#mama {position: absolute; width: inherit; height: inherit; left: 0; top: -700px; background: #ccc url('https://pic.imgdb.cn/item/62d3b7a5f54cd3f93741a4e0.jpg') no-repeat center / cover; }
#mama input { border: none; outline: none; opacity: .75; cursor: pointer; }
#mama p { margin: 0; padding: 0; }
.playbox { position: absolute; left: 10px; top: 10px; padding: 10px; font: normal 1em sans-serif; color: #eee; background: rgba(255,255,255,.2); border-radius: 8px; backdrop-filter: blur(1px); overflow: hidden; box-shadow: 1px 1px 2px rgba(0,0,0,.15); z-index: 100; }
#btnplay { width: 30px; height: 30px; border-radius: 50%; }
#btnplay:hover { background: #aaa; color: #ff0000; }
#papa > img { position: absolute; border: none; outline: none; }
#ufo2 { left: 0; top: 0; width: 64px; height: 80px; transition: all 2s; }
#tang1 { top: 520px; width: 120px; height: 120px; opacity: .52; cursor: pointer; }
@keyframes up { to { transform: translateY(-700px); } }
@keyframes down { to { top: 0px; } }
</style>
<div id="papa1">
<img id="ufo2" src="https://pic.imgdb.cn/item/62d3b7cdf54cd3f93741db03.gif" alt="" />
<img id="tang1" src="https://pic.imgdb.cn/item/62d3b7e3f54cd3f93741fc54.gif" alt="" />
<div id="mama">
<div class="playbox">
<p id="geci" style="font-size: 1.2em; text-shadow: 1px 1px 1px #222">stand by ... </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>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=545335770.mp3" loop="loop"></audio>
<script>
let lrcAr = [ ['0.00','一朵云 - 者耳'], ['120.00','热'] ];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
tang1.style.left = num(0,924) + 'px';
ufo2.style.left = num(0,924) + 'px';
tang1.onclick = () => {
tang1.style.opacity = 1;
ufo2.style.left = tang1.offsetLeft+ 30 + 'px';
ufo2.style.top = tang1.offsetTop - 60 + 'px';
setTimeout(() => {
ufo2.style.animation = tang1.style.animation = 'up 4s forwards';
},2200);
setTimeout(() => {
mama.style.animation = 'down 4s forwards';
aud.play();
},4300);
}
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) geci.innerHTML = lrcAr;
}
});
let toMin = (val) => {
if(!val) return '0:0';
val = Math.floor(val);
return parseInt(val / 60) + ':' +parseFloat(val % 60);
}
</script>
本帖最后由 绿叶清舟 于 2022-7-19 16:20 编辑 <br /><br /><style>
.mama5 { position: relative; margin-top: 120px; left: -202px; width: 1000px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/62d66807f54cd3f93779bd0f.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#bird {
position: absolute;
width: 73px;
height: 83px;
transition: left 20s, top -22s;
}
</style>
<div class="mama5">
</div>
<img id="bird" src="https://pic.imgdb.cn/item/62d66822f54cd3f9377a3e2a.gif" alt="">
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
<script>
let lastX = 0;
document.addEventListener('click', (e) => {
e = event || window.event;
let x = e.pageX, y = e.pageY,
w = document.body.clientWidth, h = document.body.clientHeight,
bw = bird.offsetWidth, bh = bird.offsetHeight;
if(x + bw >= w) x = w - bw;
if(y + bh >= h) y = h - bh;
bird.style.transform = x > lastX ? 'rotateY(180deg)' : 'rotateY(0deg)';
console.log(x,lastX,x > lastX);
lastX = x;
bird.style.left = x + 'px';
bird.style.top = y + 'px';
});
</script>
本帖最后由 绿叶清舟 于 2022-8-13 22:00 编辑
<style>
#papa { left: -214px; width: 1024px; height: 640px; background: gray url('https://638183.freep.cn/638183/Pic/81/yanhua.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; bottom: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 60px; bottom: 10px;font: bold 22px / 40px sans-serif; color: #859670; text-shadow: 2px 2px 4px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="lrcbox">纯音乐 - 烟花易冷</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script>
(function() {
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
let ctx = canv.getContext('2d');
let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight, particles = [], idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1942250548.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
canv.onclick = function(event) {
let x = event.offsetX || event.layerX, y = event.offsetY || event.layerY;
createParticle(x, y);
}
function createParticle(x, y) {
let count = 100, radius = 10;
for (let j = 0; j < count; j ++) {
let p = {};
let angle = 360 / count * j, radian = Math.PI / 180 * angle;
p.radius = radius;
p.startX = x;
p.startY = y;
p.radian = radian;
p.rgb = `${num(0,255)},${num(0,255)},${num(0,255)},`;
p.alpha = (Math.floor(Math.random() * 101)) / 100;
p.speed = (Math.random() * 5) + 0.4;
p.radius = p.speed;
particles.push(p);
}
}
function drawParticle() {
ctx.fillStyle = 'transparent';
ctx.fillRect(0, 0, w, h);
for (let j = 0; j < particles.length; j++) {
let p = particles;
let resultX = Math.cos(p.radian) * p.radius;
let resultY = Math.sin(p.radian) * p.radius + 0.4;
p.startX += resultX;
p.startY += resultY;
p.radius *= 1 - p.speed / 100;
p.alpha -= 0.005;
if (p.alpha <= 0) {
particles.splice(j, 1);
continue;
}
ctx.beginPath();
ctx.arc(p.startX, p.startY, 1, 0, 360, false);
ctx.closePath();
ctx.fillStyle = 'rgba(' + p.rgb + p.alpha + ')';
ctx.fill();
}
}
function fade() {
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, .1)';
ctx.fillRect(0, 0, w, h);
ctx.globalCompositeOperation = 'lighter';
}
function render() {
idx ++;
fade();
drawParticle();
if(idx > 20) {
createParticle(Math.random() * w, Math.random() * h/2);
idx = 0;
}
requestAnimationFrame(render);
}
render();
})();
</script>
本帖最后由 绿叶清舟 于 2022-8-14 21:26 编辑
<style>
#papa { margin: auto; left: -250px; top: 80px;width: 1100px; height: 700px; background: #985b0a url('https://pic.imgdb.cn/item/62ee5ecf16f2c2beb1091005.jpg') no-repeat; box-shadow: 3px 3px 20px -3px #000; position: relative; }
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(#000000,#969696,#000000,#969696,#000000); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px;font: bold 22px / 40px sans-serif; color: #D0EBEB; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
@keyframes circle { from { transform: rotate(0) translate(50px); } to { transform: rotate(360deg) translate(50px); } }
</style>
<div id="papa">
<div id="tit">败家的娘们</div>
<div id="disc"></div>
</div>
<BR><BR><BR><BR><BR><BR>
<script>
let stepX = 1, stepY = 1, moveX= 0, moveY = 0;
let aud = new Audio();
aud.src = 'http://music.163.com/song/media/outer/url?id=29772061.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
motion();
function motion() {
moveX += stepX;
moveY += stepY;
mama.style.left = moveX + 'px';
mama.style.top = moveY + 'px';
requestAnimationFrame(motion);
if(moveX < 0 || moveX >= papa.offsetWidth - mama.offsetWidth) stepX = -stepX;
if(moveY < 0 || moveY >= papa.offsetHeight - mama.offsetHeight) stepY = -stepY;
}
</script>
本帖最后由 绿叶清舟 于 2022-9-19 19:13 编辑 <br /><br /><style>
.mama3 { position: relative; left: -250px; width: 1100px; height: 670px; background: #ccc url('https://pic.imgdb.cn/item/63284e0816f2c2beb1b352d1.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid3 { position: absolute; width: 1100px; height: 700px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: soft-light;}
</style>
<div class="mama3">
<video class="vid3" src="https://img.tukuppt.com/video_show/2269348/00/02/02/5b4efaad2f83b.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio class="aud" src="音乐" autoplay="autoplay" loop="loop"></audio>
本帖最后由 绿叶清舟 于 2022-9-13 22:43 编辑 <br /><br /><style type="text/css">
.mama33 { position: relative; left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/6320739516f2c2beb1aef56e.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
#waiDiv { margin:10px; padding:8px; width:330px; background:#d1a2aa; 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:#dfd1d1; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#dfd1d1; color:#e2d5d5; 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:00px; 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:300px; }
#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: #dfd1d1; 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 class="mama33"></div>
<DIVstyle="position: relative; opacity: 0.8; LEFT: -116px; TOP: -400px">
<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=84187.mp3","温柔的倾诉"],
["http://music.163.com/song/media/outer/url?id=84193.mp3","可爱的家"],
["http://music.163.com/song/media/outer/url?id=84175.mp3","奔放的旋律"],
["http://music.163.com/song/media/outer/url?id=84181.mp3","海滨之歌"],
["http://music.163.com/song/media/outer/url?id=84173.mp3","月亮河"],
["http://music.163.com/song/media/outer/url?id=84196.mp3","罗密欧与朱丽叶"],
["http://music.163.com/song/media/outer/url?id=84190.mp3","试着回忆"],
["http://music.163.com/song/media/outer/url?id=84171.mp3","给我爱的人"],
["http://music.163.com/song/media/outer/url?id=84184.mp3","柔情"],
["http://music.163.com/song/media/outer/url?id=84199.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 =" #85565e";
}
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>