|
|

楼主 |
发表于 2023-6-22 10:17
|
显示全部楼层
本帖最后由 马黑黑 于 2023-6-22 10:25 编辑
帖子代码
- <style>
- #papa {
- margin: auto;
- width: 1024px;
- height: 640px;
- background: url('https://638183.freep.cn/638183/t23/2/zszi.jpeg') no-repeat center/cover,
- url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 340px 100px no-repeat,
- url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 580px 10px no-repeat;
- background-blend-mode: multiply, multiply;
- box-shadow: 3px 3px 20px #000;
- z-index: 1;
- pointer-events: none;
- position: relative;
- --state: paused;
- --delay: 0s;
- }
- #papa::before, #papa::after {
- position: absolute;
- content: '';
- width: 114px;
- height: 114px;
- background: url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') no-repeat center/cover;
- mix-blend-mode: multiply;
- pointer-events: auto;
- cursor: pointer;
- transform-origin: 50% 100%;
- animation: dance .5s var(--delay) infinite alternate linear var(--state);
- }
- #papa:before {
- left: 160px;
- top: 160px;
- }
- #papa::after {
- left: calc(50% - 57px);
- bottom: 20px;
- --delay: .25s;
- }
- @keyframes dance {
- from { transform: skew(-5deg); }
- to {transform: skew(5deg); }
- }
- </style>
- <div id="papa">
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1457817390" autoplay="autoplay" loop="loop"></audio>
- <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();
- })();
- </script>
复制代码
|
|