小九 发表于 2022-3-16 18:52

队长,我只能听到音乐,看不到图片,难道真的是我的浏览器有问题吗?

加林森 发表于 2022-3-16 19:04

本帖最后由 加林森 于 2022-5-17 20:10 编辑 <br /><br />小九 发表于 2022-3-16 18:52
队长,我只能听到音乐,看不到图片,难道真的是我的浏览器有问题吗?
刚才的上传网站出问题了,现在好了。

<style>
.stage{
        margin: auto;
        position: relative;
        left: -214px;
        width: 1024px;
        height: 554px;
        background:#666 url('https://pic.imgdb.cn/item/6283908809475431296fd1c4.jpg');
        perspective: 3000px;
        perspective-origin: 50% 50%;
        cursor: pointer;
}
.stage::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
        opacity: .1;
}
.circle {
        --x: 80px;
        position: absolute;
        width: var(--x);
        height: var(--x);
        right: 20px;
      top: 20px;
        transform-style: preserve-3d;
        animation: rot 5s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid skyblue;
        border-radius: 50%;
        padding: 0;Crimson;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
        0%{ transform: rotateZ(30deg) rotateY(0turn);}
        100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
        <div class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2022/05/17/ffcdb94643300274543c5937c0c3d840.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

红影 发表于 2022-3-17 15:27

加林森 发表于 2022-3-16 18:38
应该的,不然就不好玩了。

今天的好像按钮按不动了,队长又要动脑筋了哦。

加林森 发表于 2022-3-17 16:51

红影 发表于 2022-3-17 15:27
今天的好像按钮按不动了,队长又要动脑筋了哦。

我看看去。

加林森 发表于 2022-3-17 16:53

红影 发表于 2022-3-17 15:27
今天的好像按钮按不动了,队长又要动脑筋了哦。

我这里可以的啊,一按就停了,再按就有音乐了。

红影 发表于 2022-3-17 18:29

加林森 发表于 2022-3-17 16:53
我这里可以的啊,一按就停了,再按就有音乐了。

这个没问题的,我是说今天那个。

加林森 发表于 2022-3-17 19:00

红影 发表于 2022-3-17 18:29
这个没问题的,我是说今天那个。

已经修改好了。
页: 1 [2]
查看完整版本: 《可梦》 -- 周深