千羽 发表于 2023-6-8 20:04

【学习黑黑老师代码】《看看乐》

本帖最后由 千羽 于 2023-6-8 20:07 编辑 <br /><br /><css-doodle grid="5" id="papa">
      :doodle {
                @size: 1024px 640px;
                background: teal url('https://pic.imgdb.cn/item/6481c2591ddac507cc06a3eb.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(-160deg + var(--deg))) translate(50px); } }          原来是translate(100px);    有把
</css-doodle>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1920035560" 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.onclick = () => aud.paused ? aud.play() : aud.pause();
      }
})();
</script>







千羽 发表于 2023-6-8 20:06

本帖最后由 千羽 于 2023-6-8 20:12 编辑

@黑黑老师，怎么没显示？请帮我看看吧{:4_201:}

…………换了个浏览器就看到了{:4_173:}

不会放动图……{:4_181:}

千羽 发表于 2023-6-8 20:11

本帖最后由 千羽 于 2023-6-8 20:14 编辑

千羽 发表于 2023-6-8 20:06
@黑黑老师，怎么没显示？请帮我看看吧

…………换了个浏览器就看到了
谢谢黑黑老师的漂亮播放器代码{:4_187:}

醉美水芙蓉 发表于 2023-6-8 20:35

千羽 发表于 2023-6-8 21:25

醉美水芙蓉 发表于 2023-6-8 20:35
很漂亮！

谢谢芙蓉夸奖，我这做的太单调了，啥都不会……{:4_181:}

红影 发表于 2023-6-8 21:48

做的漂亮。欣赏羽儿好帖。
这外面的圆球好像往里面收了呢{:4_173:}

樵歌 发表于 2023-6-9 06:24

音画和代码的完美结合。{:4_187:}

梦缘 发表于 2023-6-9 17:00

很漂亮，感谢老师分享！{:4_187:}

千羽 发表于 2023-6-9 20:06

红影 发表于 2023-6-8 21:48
做的漂亮。欣赏羽儿好帖。
这外面的圆球好像往里面收了呢

嗯{:4_173:}

千羽 发表于 2023-6-9 20:07

樵歌 发表于 2023-6-9 06:24
音画和代码的完美结合。

谢谢樵歌老师鼓励{:4_173:}

千羽 发表于 2023-6-9 20:07

梦缘 发表于 2023-6-9 17:00
很漂亮，感谢老师分享！

问好梦缘，谢谢啦{:4_187:}

红影 发表于 2023-6-9 20:44

千羽 发表于 2023-6-9 20:06
嗯

这样也很漂亮。羽儿学得很不错呢{:4_187:}

千羽 发表于 2023-6-9 21:17

红影 发表于 2023-6-9 20:44
这样也很漂亮。羽儿学得很不错呢

影儿，我做不好呢{:4_173:}

红影 发表于 2023-6-9 22:02

千羽 发表于 2023-6-9 21:17
影儿，我做不好呢

很好啊，现实完全正确，那个收缩的圆环也很有趣的呢{:4_173:}

樵歌 发表于 2023-6-10 20:27

千羽 发表于 2023-6-9 20:07
谢谢樵歌老师鼓励

加油。{:4_204:}

南无月 发表于 2023-6-10 20:56

这个美女爱了爱了，神态慵懒自在，不在乎世间一切的感觉。。。{:4_173:}
小播外圈的圆逐渐放大缩小，可以盯着看很久~~
千羽出图，必是精品，十分喜欢！{:4_199:}

千羽 发表于 2023-6-10 22:39

红影 发表于 2023-6-9 22:02
很好啊，现实完全正确，那个收缩的圆环也很有趣的呢

谢谢影儿鼓励哈{:4_185:}

千羽 发表于 2023-6-10 22:40

樵歌 发表于 2023-6-10 20:27
加油。

好的，俺不会代码{:4_181:}

千羽 发表于 2023-6-10 22:41

南无月 发表于 2023-6-10 20:56
这个美女爱了爱了，神态慵懒自在，不在乎世间一切的感觉。。。
小播外圈的圆逐渐放大缩小，可以 ...

月儿，这是以前做的图，套上黑黑老师的代码就成，挺单调的……{:4_173:}

马黑黑 发表于 2023-6-10 22:50

千羽 发表于 2023-6-8 20:06
@黑黑老师，怎么没显示？请帮我看看吧

…………换了个浏览器就看到了


很多css3、HTML5的东东，旧内核的浏览器支持度跟不上，所以手头得有至少两个浏览器：一个怀旧版，一个现代浏览器。

建议使用 百分浏览器 作为主打浏览器，速度很快。
页: [1] 2
查看完整版本: 【学习黑黑老师代码】《看看乐》