|
|

楼主 |
发表于 2023-3-29 08:09
|
显示全部楼层
帖子代码
- <style>
- #papa { --state: running; --delay: 0s; margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: black url('https://638183.freep.cn/638183/t23/1/65.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
- #papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/btn/star.png'); animation: flash 1s var(--delay) infinite alternate var(--state); }
- #papa::after { left: 400px; --delay: .5s; }
- #mydiv { position: absolute; left: 50%; bottom: 100px; width: 100px; height: 120px; border-style: solid; border-color: transparent transparent hsla(0, 0%,100%, .45) transparent; border-width: 20px 120px 120px 120px; border-radius: 50%; box-shadow: 20px 20px 30px snow inset, -20px -20px 30px snow inset; filter: drop-shadow(-500px -100px 0 silver); cursor: pointer; transform: rotate(15deg); animation: fly 4s infinite alternate var(--state); }
- #mydiv::before, #mydiv::after { position: absolute; content: ''; border-radius: 100%; background: silver; top: -5px; animation: rot .5s infinite linear var(--state); }
- #mydiv::before { width: 100px; height: 10px; }
- #mydiv::after { width: 10px; height: 100px; left: calc(50% - 5px); top: -50px; }
- @keyframes fly { 10% { bottom: 120px; left: 50%; } 20% { bottom: 140px; left: 55%; } 50% { bottom: 100px; left: 50%; } }
- @keyframes rot { from { transform: rotateX(60deg) rotateZ(0); } to { transform: rotateX(60deg) rotateZ(360deg); } }
- @keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0; transform: rotate(5deg); } }
- </style>
- <div id="papa">
- <div id="mydiv"></div>
- </div>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=332655" loop autoplay></audio>
- <script>
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState,false);
- aud.addEventListener('pause', mState,false);
- mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
- </script>
复制代码
|
|