初始设计的《Elevate》小播

马黑黑 发表于 2025-7-31 13:24

本帖最后由马黑黑于 2025-7-31 18:33 编辑 <br /><br /><style>
#ma {
--size: 300px;
position: relative;
margin: 100px 0 100px calc(50% - var(--size) / 2);
width: var(--size);
height: var(--size);
display: grid;
place-items: center;
animation: rot 8s linear infinite;
}
#ma::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: pink;
}
.son {
position: absolute;
width: 100%;
height: 1px;
background: linear-gradient(to right, var(--bg1), var(--bg2));
transform: rotate(var(--a));
display: grid;
place-items: center;
}
.son::before, .son::after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background: inherit;
border-radius: 50%;
left: 0;
}
.son::after {
left: calc(100% - 24px);
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>

<div id="ma"></div>

<script>
const total = 7;
Array.from({length: total}).forEach( (son, key) => {
son = document.createElement('div');
son.className = 'son';
son.style.cssText += `
--bg1: #${Math.random().toString(16).substring(2, 8)};
--bg2: #${Math.random().toString(16).substring(2, 8)};
--a: ${key * 180 / total}deg;
`;
ma.appendChild(son);
});
</script>

马黑黑 发表于 2025-7-31 13:25

本帖最后由马黑黑于 2025-7-31 18:34 编辑

参考代码

<style>
#ma {
   --size: 300px;
   position: relative;
   margin: 100px 0 100px calc(50% - var(--size) / 2);
   width: var(--size);
   height: var(--size);
   display: grid;
   place-items: center;
   animation: rot 8s linear infinite;
}
#ma::after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: pink;
}
.son {
   position: absolute;
   width: 100%;
   height: 1px;
   background: linear-gradient(to right, var(--bg1), var(--bg2));
   transform: rotate(var(--a));
   display: grid;
   place-items: center;
}
.son::before, .son::after {
   content: '';
   position: absolute;
   width: 24px;
   height: 24px;
   background: inherit;
   border-radius: 50%;
   left: 0;
}
.son::after {
   left: calc(100% - 24px);
}
@keyframes rot {
   to { transform: rotate(360deg); }
}
</style>

<div id="ma"></div>

<script>
const total = 7;
Array.from({length: total}).forEach( (son, key) => {
   son = document.createElement('div');
   son.className = 'son';
   son.style.cssText += `
         --bg1: #${Math.random().toString(16).substring(2, 8)};
         --bg2: #${Math.random().toString(16).substring(2, 8)};
         --a: ${key * 180 / total}deg;
   `;
   ma.appendChild(son);
});
</script>
《Elevate》链接：Elevate - 动画音画 - 花潮论坛 - Powered by Discuz!

梦江南 发表于 2025-7-31 14:41

问好黑黑老师，是什么原因，一点评分这图就不见了，得重新启动才会出来呢？

红影发表于 2025-7-31 15:40

原来这里有专门的讲解，我还在那个帖子里使劲看呢{:4_173:}

杨帆发表于 2025-7-31 15:49

辛苦了！谢谢马老师经典讲授与精彩示范{:4_190:}

马黑黑 发表于 2025-7-31 18:35

梦江南发表于 2025-7-31 14:41
问好黑黑老师，是什么原因，一点评分这图就不见了，得重新启动才会出来呢？

这是我的JS使用了较新的一些关键字，论坛程序在某些局部刷新机制中不予承认。这是正常现象，手动刷新一下就好

马黑黑 发表于 2025-7-31 18:36

杨帆发表于 2025-7-31 15:49
辛苦了！谢谢马老师经典讲授与精彩示范

{:4_191:}

马黑黑 发表于 2025-7-31 18:36

红影发表于 2025-7-31 15:40
原来这里有专门的讲解，我还在那个帖子里使劲看呢

这个应该是简单的，有点耐心的都可以设计出来

梦江南 发表于 2025-7-31 18:43

马黑黑发表于 2025-7-31 18:35
这是我的JS使用了较新的一些关键字，论坛程序在某些局部刷新机制中不予承认。这是正常现象，手动刷新一下 ...

谢谢老师回复。知道了。

马黑黑 发表于 2025-7-31 20:09

梦江南发表于 2025-7-31 18:43
谢谢老师回复。知道了。

{:4_190:}

红影发表于 2025-7-31 22:51

马黑黑发表于 2025-7-31 18:36
这个应该是简单的，有点耐心的都可以设计出来

还是挺不容易的，黑黑厉害{:4_187:}

马黑黑 发表于 2025-7-31 22:56

红影发表于 2025-7-31 22:51
还是挺不容易的，黑黑厉害

应该没啥吧？不必之前用svg实现的复杂

红影发表于 2025-8-1 11:03

马黑黑发表于 2025-7-31 22:56
应该没啥吧？不必之前用svg实现的复杂

是的，这个原理还是挺简单的，做出来也不容易啊。

马黑黑 发表于 2025-8-1 12:25

红影发表于 2025-8-1 11:03
是的，这个原理还是挺简单的，做出来也不容易啊。

自己试试，完整做一次，开始会感觉有点难，写不出来就去参考一下人家的代码，自己继续写。久而久之，想要啥样纸，都能弄出来

红影发表于 2025-8-1 18:55

马黑黑发表于 2025-8-1 12:25
自己试试，完整做一次，开始会感觉有点难，写不出来就去参考一下人家的代码，自己继续写。久而久之，想要 ...

这个真的还不行，都喜欢了跟在后面套着玩{:4_173:}

马黑黑 发表于 2025-8-1 20:03

红影发表于 2025-8-1 18:55
这个真的还不行，都喜欢了跟在后面套着玩

这个要突破的

红影发表于 2025-8-1 20:36

马黑黑发表于 2025-8-1 20:03
这个要突破的

习惯还是挺难改的{:4_173:}

马黑黑 发表于 2025-8-1 22:57

红影发表于 2025-8-1 20:36
习惯还是挺难改的

慢慢来不急

红影发表于 2025-8-2 21:13

马黑黑发表于 2025-8-1 22:57
慢慢来不急

急了也没用啊{:4_173:}

马黑黑 发表于 2025-8-2 21:17

红影发表于 2025-8-2 21:13
急了也没用啊

没用就更不用急

页: [1] 2 3 4

花潮论坛's Archiver

初始设计的《Elevate》小播