一斛珠 发表于 2023-5-21 11:28

套用黑黑老师代码玩玩

本帖最后由 一斛珠 于 2023-5-21 15:05 编辑 <br /><br /><BR><BR><BR><BR>
<css-doodle grid="1" id="mplayer">
:doodle {
@size: 1024px 640px;
background: url('http://www.hongrenju.net/data/attachment/forum/month_1207/12072208566d3ab77d4be09870.jpg') no-repeat center/cover;
box-shadow: 0 0 9px #000;
position: relative;
margin: 0 0 0 calc(50% - 593px); 左右
z-index: 1;
--state: paused;
}
@size: 100px;
clip-path: @shape(
points: 200;
scale: .3;
x: 2 * cos(3t) + cos(t);
y: 2 * sin(t) + sin(2t);
);
position: absolute;
background: rgb(@m3(@r(255)));
offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
animation: move 40s infinite linear var(--state);
cursor: pointer;
@keyframes move { to { offset-distance: 100%; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178386" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.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);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

一斛珠 发表于 2023-5-21 11:29

哇塞，好喜欢哈。{:4_205:}

一斛珠 发表于 2023-5-21 11:30

@马黑黑{:4_176:}谢谢你的代码

马黑黑 发表于 2023-5-21 11:32

一斛珠 发表于 2023-5-21 11:30
@马黑黑谢谢你的代码

不客气。做的很棒。

一斛珠 发表于 2023-5-21 11:37

马黑黑 发表于 2023-5-21 11:32
不客气。做的很棒。

是老师的代码漂亮啊，我就是把我的图片贴进去了。
黑黑老师，飞机就是播放器吗？

醉美水芙蓉 发表于 2023-5-21 11:42

马黑黑 发表于 2023-5-21 11:44

一斛珠 发表于 2023-5-21 11:37
是老师的代码漂亮啊，我就是把我的图片贴进去了。
黑黑老师，飞机就是播放器吗？

这个是概念飞行器，可以理解它是播放控制器，不过整个页面都是播放器控制器

一斛珠 发表于 2023-5-21 11:59

马黑黑 发表于 2023-5-21 11:44
这个是概念飞行器，可以理解它是播放控制器，不过整个页面都是播放器控制器

哦哦，明白了。{:4_180:}

马黑黑 发表于 2023-5-21 12:46

一斛珠 发表于 2023-5-21 11:59
哦哦，明白了。
谢茶

红影 发表于 2023-5-21 14:19

这个图图配这个效果特别好看呢，珠儿太棒了{:4_199:}

一斛珠 发表于 2023-5-21 15:06

红影 发表于 2023-5-21 14:19
这个图图配这个效果特别好看呢，珠儿太棒了

是呀，发现这个代码不能发红人。

南无月 发表于 2023-5-21 18:18

这个背景图是高手做的，太漂亮 了

梦缘 发表于 2023-5-21 19:59

真好看，套用的漂亮啊！{:4_187:}

红影 发表于 2023-5-21 22:24

一斛珠 发表于 2023-5-21 15:06
是呀，发现这个代码不能发红人。

花潮里能用的啊，我也是每次套用，不是很懂呢。珠儿做得好棒{:4_199:}

一斛珠 发表于 2023-5-22 22:37

南无月 发表于 2023-5-21 18:18
这个背景图是高手做的，太漂亮 了

图是零几年做的了哈 拿来套进代码蛮好看的
谢谢朋友了

一斛珠 发表于 2023-5-22 22:38

梦缘 发表于 2023-5-21 19:59
真好看，套用的漂亮啊！

谢谢梦儿老师

一斛珠 发表于 2023-5-22 22:39

红影 发表于 2023-5-21 22:24
花潮里能用的啊，我也是每次套用，不是很懂呢。珠儿做得好棒

我去替换我红人的这个帖子，特效不现实了。{:4_203:}

一斛珠 发表于 2023-5-22 22:39

这曲子真好听。

红影 发表于 2023-5-23 09:56

一斛珠 发表于 2023-5-22 22:39
我去替换我红人的这个帖子，特效不现实了。

JS里的script.src = '/css-doodle.min.js';这句是用了上传在花潮的css-doodle.min文件，在花潮可以省略前面的地址，到别的地方就不可以了，珠儿可以用个其他地址的，我去帮你找一下。。。

红影 发表于 2023-5-23 09:58

script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
珠儿试着替换成这句，也就是JS里的我复制的那个。
页: [1] 2
查看完整版本: 套用黑黑老师代码玩玩