|
|

楼主 |
发表于 2023-6-6 19:44
|
显示全部楼层
本帖最后由 马黑黑 于 2023-6-6 19:46 编辑
不扰民最好
代码
- <style>
- #papa {
- margin: 0 0 0 calc(50% - 593px);
- width: 1024px;
- height: 640px;
- background: snow url('https://638183.freep.cn/638183/t23/2/gy.jpg') no-repeat center/cover;
- box-shadow: 0 0 8px #000;
- position: relative;
- --state: paused; --delay: 0s;
- }
- #papa::before, #papa::after {
- position: absolute;
- content: url('https://638183.freep.cn/638183/t22/gif/hudie.gif');
- transform: rotate(-90deg);
- offset-path: path('M60 60 H960 z');
- offset-distance: 100%;
- animation: fly 30s var(--delay) infinite linear var(--state);
- }
- #papa::after { --delay: -15s; }
- #papa > img {
- position: absolute;
- left: 55%;
- bottom: 20%;
- cursor: pointer;
- }
- @keyframes fly { to { offset-distance: 0%; } }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1854481298" autoplay="autoplay" loop="loop"></audio>
- <img id="mplayer" src="https://638183.freep.cn/638183/2-0.gif" alt="" />
- </div>
- <script>
- (function() {
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- mplayer.onmouseover = () => mplayer.src = 'https://638183.freep.cn/638183/2-2.gif';
- mplayer.onmouseout = () => mplayer.src = 'https://638183.freep.cn/638183/2-0.gif';
- })();
- </script>
复制代码
|
|