开个作业贴

绿叶清舟

马黑黑 发表于 2022-1-31 23:34
其实，仔细看看代码，不是有缺漏，就是有小错误

好的，先祝新年好，天天喝高高

马黑黑

绿叶清舟 发表于 2022-2-1 11:45
好的，先祝新年好，天天喝高高

再高就到404房间了

绿叶清舟

绿叶清舟

马黑黑 发表于 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:

绿叶清舟

<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>

<div  class="box">    <div class="icon icon1"></div>    <div class="icon icon2"></div></div>

绿叶清舟

绿叶清舟

·

静音 单曲 轮播

+

添歌

马黑黑

绿叶清舟

马黑黑 发表于 2022-2-23 21:21

发现一个情况啊，如果一页里有二个象七十楼的播放器上面的会把下面的吃掉的啊

马黑黑

绿叶清舟 发表于 2022-3-4 19:49
发现一个情况啊，如果一页里有二个象七十楼的播放器上面的会把下面的吃掉的啊

这是盒子id相同的缘故。同一页里的第二个播放器，外div需要设置不同的id

绿叶清舟

马黑黑 发表于 2022-3-4 20:10
这是盒子id相同的缘故。同一页里的第二个播放器，外div需要设置不同的id

赔俺精神损失，那天以为哪里代码错了，反复折腾到最后才发现那些连接跑到上面一楼去了

绿叶清舟

火

绿叶清舟

<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
就是烧得不均匀了

慢慢尝试，总能体会出来

绿叶清舟