|
|

楼主 |
发表于 2023-6-13 12:17
|
显示全部楼层
帖子代码
- <css-doodle grid="2" id="mplayer">
- :doodle {
- @size: 1280px 689px;
- background: lightblue url('https://638183.freep.cn/638183/t23/webp1/lohx.webp');
- box-shadow: 0 0 8px #000;
- position: relative;
- margin: 30px auto;
- --state: paused;
- }
- position: absolute;
- @nth(1) {
- @place: 50% 10%;
- @size: 80px;
- :after {
- @size: 100%;
- @shape: windmill;
- content: '';
- background: radial-gradient(rgba(100,100,100,.3), rgba(0,0,100,.6));
- }
- cursor: pointer;
- z-index: calc(@size + 1);
- animation: rot 6s infinite linear var(--state);
- }
- @nth(2) {
- @size: 100%;
- background: @doodle(
- @grid: 10 / 100%;
- @place: @r(0,100)% -10%;
- :after {
- content: '@p(🌸,❀,🏵️,🌺,❄️,💮,🍃)';
- animation: rot 4s infinite linear;
- font-size: @r(15,30)px;
- }
- animation: fly @r(30,50)s @r(0,-30)s infinite;
- @keyframes rot { to { transform: rotate(@p(-360,360)deg); } }
- @keyframes fly {
- from { transform: rotate(0deg) translateY(0); opacity: .9;}
- to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }
- }
- );
- }
- @nth(3,4) {
- @place: 90% 95%;
- font-size: 4em;
- :after {content: '🐇'}
- }
- @nth(4){ transform: translate(20px); }
- @keyframes rot { to { transform: rotate(360deg); } }
- </css-doodle>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=572493976" 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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- window.onload = () => {
- let btn = mplayer.shadowRoot.querySelector('cell');
- btn.onclick = () => aud.paused ? aud.play() : aud.pause();
- }
- })();
- </script>
复制代码
|
|