|
|

楼主 |
发表于 2023-6-7 22:19
|
显示全部楼层
帖子代码
- <css-doodle grid="5" id="papa">
- :doodle {
- @size: 1024px 640px;
- background: teal url('https://638183.freep.cn/638183/t23/2/118.jpg') no-repeat center/cover;
- box-shadow: 0 0 8px #000;
- position: relative;
- margin: 0 0 0 calc(50% - 593px);
- z-index: 1;
- --state: running;
- }
- @place: center;
- @nth(@size,@size - 1) {
- @size: 120px;
- cursor: pointer;
- background: none;
- }
- @nth(@size - 1) {
- background: tan;
- clip-path: @shape(
- points: 200;
- scale: .8;
- frame: 100;
- r: sin(7t)/2^cos(14t)/4;
- );
- animation: rot 6s infinite linear var(--state);
- }
- @match(i ≤ @size - 2) {
- @size: 20px;
- position: absolute;
- background: rgba(@m3(@r(255)),.95);
- border-radius: 50%;
- transform: rotate(var(--deg)) translate(100px);
- animation: go 10s infinite linear var(--state);
- --deg: calc(@i * 360deg / (@size - 2));
- }
- @keyframes rot { to { transform: rotate(360deg); } }
- @keyframes go { to { transform: rotate(calc(-360deg + var(--deg))) translate(100px); } }
- </css-doodle>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31830835" autoplay="autoplay" loop="loop"></audio>
- <script>
- (function() {
- let script = document.createElement('script');
- script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
- document.head.appendChild(script);
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- window.onload = () => {
- let mplayers = papa.shadowRoot.querySelectorAll('cell');
- mplayers[mplayers.length - 1].onclick = () => aud.paused ? aud.play() : aud.pause();
- }
- })();
- </script>
复制代码
|
|