马黑黑 发表于 2022-1-31 23:34
其实，仔细看看代码，不是有缺漏，就是有小错误
好的，先祝新年好，天天喝高高{:4_189:}
绿叶清舟 发表于 2022-2-1 11:45
好的，先祝新年好，天天喝高高
再高就到404房间了
本帖最后由 绿叶清舟 于 2022-2-23 19:10 编辑 <br /><br /><style type="text/css">
/* 旋转按钮二 仿光盘 34*34
利用 borderr-color 着背景色
HTML代码：<div id="btn-ro" class="btn-ro"></div>
*/
.btn-ro {
width: 8px; height: 8px;
background:;
border: 13px solid;
border-color: url('https://www.huachaowang.com/data/attachment/forum/202202/01/202828dzqmrwo3rs9y2lmm.gif') no-repeat;
border-radius: 50%;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
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>
<audio id="ymusic" src="音乐" autoplay="autoplay" loop="loop"></audio>
<div class="btn-ro"></div>
<script>
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }
</script>
马黑黑 发表于 2022-2-1 11:53
再高就到404房间了
这个转的想换个图片的怎么变成这样了
绿叶清舟 发表于 2022-2-1 21:12
这个转的想换个图片的怎么变成这样了
你换到了border-color来了，估计要换在 background 那里吧
马黑黑 发表于 2022-2-2 09:21
你换到了border-color来了，估计要换在 background 那里吧
上面也试过了一样的效果
绿叶清舟 发表于 2022-2-3 13:33
上面也试过了一样的效果
xx-color：不能用背景图片。能接受背景图片的是 xx: 或 xx-image:
本帖最后由 绿叶清舟 于 2022-2-11 12:20 编辑
<style type="text/css">
.box{
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid #cb6341;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box:after, .box:before{
content: "";
width: 110%;
height: 110%;
box-sizing: border-box;
border: 2px solid;
position: absolute;
top: -5%;
left: -5%;
animation: boxBorder 6s linear infinite;
}
.box:before{
animation-delay: -3s;
}
/* 布局结束 */
/* 动画开始 */
@keyframes boxBorder {
0%{
border-color: #fff;
clip: rect(200, 420px, 220px ,200);
}
25%{
border-color: yellow;
clip: rect(200, 220px, 420px ,200);
}
50%{
border-color: blue;
clip: rect(218px, 420px, 420px ,200);
}
75%{
border-color: green;
clip: rect(200, 420px, 420px ,418px);
}
100%{
border-color: aqua;
clip: rect(200, 420px, 220px ,200);
}
}
</style>
<divclass="box"> <div class="icon icon1"></div> <div class="icon icon2"></div></div>
本帖最后由 绿叶清舟 于 2022-2-20 13:17 编辑 <br /><br /><style>
#fshan {
position: relative;
width: 110px;
height: 110px;
border:10px solid darkgreen;
border-radius: 50%;
background: transparent;
}
#fshan::before, #fshan::after {
content: "";
position: absolute;
background: green;
animation: zhuan .2s linear infinite;
}
#fshan::before {
left: 50px;
top: 5px;
width: 10px;
height: 100px;
}
#fshan::after {
width: 100px;
height: 10px;
left: 5px;
top: 50px;
}
@keyframes zhuan {
to { transform: rotate(720deg); }
}
</style>
<div id="fshan"></div>
本帖最后由 绿叶清舟 于 2022-2-24 17:16 编辑 <br /><br /><style type="text/css">
#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 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>
<script>
//音乐数据 注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
["http://music.163.com/song/media/outer/url?id=526472472.mp3","乱红","陈悦"],
["http://music.163.com/song/media/outer/url?id=5253675.mp3","升"],
["https://www.kumeiwp.com/sub/filestores/2022/02/23/3b348f94dbd4c2c843e7976a776bd154.mp3","呼吸"],
["https://joy127.jstools.net/uploads/mp3/202202/23/20226216270d12739135688.mp3","离弦"],
["http://music.163.com/song/media/outer/url?id=25730799.mp3","最后一只舞"],
["https://www.kumeiwp.com/sub/filestores/2022/02/23/f59f9c9c188a99ab7c82cf9fdbf66e34.mp3","西出长安"],
["https://www.kumeiwp.com/sub/filestores/2022/02/23/06952ab784aff1d6cee8b180ee3c6aeb.mp3","谜"],
["http://music.163.com/song/media/outer/url?id=1437070924.mp3","这支烟灭了以后"],
["http://music.163.com/song/media/outer/url?id=28725740.mp3","Asoka Theme"],
];
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>
{:4_187:}
马黑黑 发表于 2022-2-23 21:21
发现一个情况啊，如果一页里有二个象七十楼的播放器上面的会把下面的吃掉的啊
绿叶清舟 发表于 2022-3-4 19:49
发现一个情况啊，如果一页里有二个象七十楼的播放器上面的会把下面的吃掉的啊
这是盒子id相同的缘故。同一页里的第二个播放器，外div需要设置不同的id
马黑黑 发表于 2022-3-4 20:10
这是盒子id相同的缘故。同一页里的第二个播放器，外div需要设置不同的id
赔俺精神损失，那天以为哪里代码错了，反复折腾到最后才发现那些连接跑到上面一楼去了
本帖最后由 绿叶清舟 于 2022-3-16 20:17 编辑 <br /><br /><style type="text/css">
.fireBox {
margin: auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
font-size: 4rem;
font-weight: bold;
color: #ff0000;
background: ;
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
animation: glow 1s linear infinite;
}
@keyframes glow {
from {
text-shadow:
0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;
}
to {
text-shadow:
0 0 10px #fefcc9,
10px -10px 15px #feec85,
-20px -20px 20px #ffae34,
20px -40px 25px #ec760c,
-20px -60px 30px #cd4606,
0 -80px 35px #973716,
10px -90px 40px #451b0e;
}
}
</style>
<div class="fireBox">火</div>
<style type="text/css">
.picBtn {
width: 32px;
height: 32px;
border: none;
border-radius: 8px;
background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif') no-repeat;
cursor: pointer;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.25);
}
.picBtn:hover {
opacity: 0.95;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.3);
}
.picBtn:active {
opacity: 0.8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
}
</style>
<p><audio id="music" src="音乐地址"></audio></p>
<p><button id="picBtn" class="picBtn"></button></p>
<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')");
}
mu.addEventListener("ended", function(){
btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')";
})
</script>
绿叶清舟 发表于 2022-3-15 19:06
本帖最后由 绿叶清舟 于 2022-3-16 20:17 编辑
.fireBox {
margin: auto;
这个火字还真烧起来了
马黑黑 发表于 2022-3-22 18:35
这个火字还真烧起来了
就是烧得不均匀了
绿叶清舟 发表于 2022-3-22 20:13
就是烧得不均匀了
慢慢尝试，总能体会出来
本帖最后由 绿叶清舟 于 2022-3-25 20:49 编辑 <br /><br /><style>
.paBox {
width: 100%;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
background:rgba(0,0,0,0.6);
filter: contrast(30);
}
.ball {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background:rgba(0,0,0,2.6);
transition: transform .8s;
filter: blur(15px);
}
.ball-1 { animation: mvL 4s linear infinitealternate; }
.ball-2 { animation:wave linear 1s infinite alternate; }
.ball-3 { animation: mvR 4s linear infinite alternate; }
@keyframes wave { to { transform: scale(1.5) rotate(180deg); } }
@keyframes mvL { to { transform: translateX(-165px); } }
@keyframes mvR { to { transform: translateX(165px); } }
</style>
<div class="paBox">
<div class="ball ball-1"></div>
<div class="ball ball-2"></div>
<div class="ball ball-3"></div>
</div>