|
|
前面弄不清楚你的描述,现在搞懂了:
- <style>
- #papa { left: -318px; width: 1200px; height: 739px; display: flex; justify-content: center; background: #000 url('http://wx.ttt.dj/data/nfs/img/002.jpg') no-repeat center/cover; perspective: 2000px; box-shadow: 4px 4px 24px #000; font-size: 18px; position: relative; }
- #papa h2 { position: absolute; margin-top: 20px; font: bold 30px / 30px sans-serif; color: #222; text-shadow: 1px 2px 3px #aaa; }
- #wrapper { position: absolute; left: 40%;top: 220px; width: 300px; height: 300px; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(-20deg); animation: rot1 4s linear forwards; }
- #ball { position: absolute; left: -560px; top: 100px; width: 481px; height: 221px; border-radius: 50%; transform: translateZ(20px); }
- #btnPlay { position: absolute; left: 40px; bottom: 40px; outline: none; cursor: pointer; }
- #yyMsg { position: absolute; left: 110px; bottom: 40px; color:Black; }
- #btnBegin { position: absolute; bottom: 40px; outline: none; cursor: pointer; }
- #mkMsg { position: absolute; left: 300px; bottom: 40px; }
- </style>
- <div id="papa">
- <h2></h2>
- <div id="wrapper"><img id="ball" src="https://pic.imgdb.cn/item/62e89dd416f2c2beb192d047.gif" alt="" /></div>
- <input id="btnPlay" type="button" value="音乐停" />
- <span id="yyMsg">背景音乐 -爱难求情难断</span>
- <span id="mkMsg"></span>
- </div>
- <script>
- let aud = new Audio();
- aud.src = 'https://wx.ttt.dj/data/nfs/mp3/anqiu.mp3';
- aud.loop = true;
- aud.autoplay = true;
- btnPlay.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('playing', () => btnPlay.value = '音乐停');
- aud.addEventListener('pause', () => btnPlay.value = '音乐放');
- </script>
复制代码
|
|