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

千羽

: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); 有把

千羽

@黑黑老师，怎么没显示？请帮我看看吧

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

不会放动图……

千羽

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

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

谢谢黑黑老师的漂亮播放器代码

千羽

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

谢谢芙蓉夸奖，我这做的太单调了，啥都不会……

红影

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

樵歌

音画和代码的完美结合。

梦缘

很漂亮，感谢老师分享！

千羽

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

嗯

千羽

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

谢谢樵歌老师鼓励

千羽

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

问好梦缘，谢谢啦

红影

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

这样也很漂亮。羽儿学得很不错呢

千羽

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

影儿，我做不好呢

红影

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

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

樵歌

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

加油。

南无月

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

千羽

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

谢谢影儿鼓励哈

千羽

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

好的，俺不会代码

千羽

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

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

马黑黑

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

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

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

建议使用 百分浏览器 作为主打浏览器，速度很快。