|
|

楼主 |
发表于 2023-3-6 20:19
|
显示全部楼层
帖子代码
- <style>
- #papa {
- --state: paused;
- margin: 80px 0 0 calc(50% - 781px);
- width: 1400px;
- height: 800px;
- background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') no-repeat center/cover;
- box-shadow: 3px 3px 20px #000;
- position: relative;
- pointer-events: none;
- z-index: 1;
- }
- #papa::before {
- position: absolute;
- content: '';
- pointer-events: auto;
- left: 154px;
- top: 253px;
- width: 206px;
- height: 135px;
- background: gray url('https://docimg6.docs.qq.com/image/AgAAC6u-TVOC_8GHQrZIY53X14tQwyim.png') -154px -253px;
- border-radius: 50%;
- cursor: pointer;
- animation: scale .6s infinite alternate var(--state);
- }
- @keyframes scale { to { transform: scale(1.2) skew(8deg); } }
- </style>
- <div id="papa">
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=265951.mp3" loop autoplay></audio>
- </div>
- <script>
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('play', () => mState());
- aud.addEventListener('pause', () => mState());
- </script>
复制代码
|
|