马黑黑 发表于 2022-4-13 12:22

CSS+JS小玩意：有去有回

本帖最后由 马黑黑 于 2022-4-13 12:31 编辑 <br /><br /><style>
.outbox {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-top: 100px;
        width: 500px;
        height: 500px;
        position: relative;
}

.outbox div {
        position: absolute;
        --len: 40px;
        width: var(--len);
        height: var(--len);
        font: 14px / var(--len) Sans-serif;
        background: #666 linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
        text-align: center;
        border-radius: 50%;
}

</style>

<div class="outbox"></div>

<script>
let box = document.querySelector('.outbox');
let total = 40;
let angle = 360 / total;
let len = box.clientWidth / 2;
let str = '';
let step = total;
let go = true;
for(j=0; j<total; j++) {
        str += `<div>${j+1}</div>`;
}
box.innerHTML = str;

function forward(ele,ang) {
        ele.style.transform = `rotate(${ang}deg) translate(${len}px) rotate(${360-ang}deg)`;
}
function back(ele,ang) {
        ele.style.transform = `rotate(0deg) translate(0px) rotate(0deg)`;
}

setInterval(function() {
        if(go) {
                step = step - 1;
                if(step <= 0) go = false;
                forward(box.children,step*angle);
        } else {
                back(box.children,0);
                step = step + 1;
                if(step >= total) go = true;
        }
},100);
</script>

马黑黑 发表于 2022-4-13 12:22

本帖最后由 马黑黑 于 2022-4-13 12:31 编辑

原创代码分享：
<style>
.outbox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto;
      margin-top: 100px;
      width: 500px;
      height: 500px;
      position: relative;
}

.outbox div {
      position: absolute;
      --len: 40px;
      width: var(--len);
      height: var(--len);
      font: 14px / var(--len) Sans-serif;
      background: #666 linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
      text-align: center;
      border-radius: 50%;
}

</style>

<div class="outbox"></div>

<script>
let box = document.querySelector('.outbox');
let total = 40;
let angle = 360 / total;
let len = box.clientWidth / 2;
let str = '';
let step = total;
let go = true;
for(j=0; j<total; j++) {
      str += `<div>${j+1}</div>`;
}
box.innerHTML = str;

function forward(ele,ang) {
      ele.style.transform = `rotate(${ang}deg) translate(${len}px) rotate(${360-ang}deg)`;
}
function back(ele,ang) {
      ele.style.transform = `rotate(0deg) translate(0px) rotate(0deg)`;
}

setInterval(function() {
      if(go) {
                step = step - 1;
                if(step <= 0) go = false;
                forward(box.children,step*angle);
      } else {
                back(box.children,0);
                step = step + 1;
                if(step >= total) go = true;
      }
},100);
</script>

马黑黑 发表于 2022-4-13 12:23

第26行是HTML代码，其上为CSS，其下是JS

马黑黑 发表于 2022-4-13 12:23

第26行是HTML代码，其上为CSS，其下是JS

梦油 发表于 2022-4-13 15:33

有趣，有趣，而且很实用

红影 发表于 2022-4-13 17:58

逐个添加，逐个收起。有趣。中间的还能计数。强大的JS{:4_199:}

马黑黑 发表于 2022-4-13 18:05

红影 发表于 2022-4-13 17:58
逐个添加，逐个收起。有趣。中间的还能计数。强大的JS

中间是各个“围棋子”，它们离开原地，又依次回到原地

红影 发表于 2022-4-13 21:38

马黑黑 发表于 2022-4-13 18:05
中间是各个“围棋子”，它们离开原地，又依次回到原地

这个JS看着很简洁，但很难理解。

马黑黑 发表于 2022-4-13 22:03

红影 发表于 2022-4-13 21:38
这个JS看着很简洁，但很难理解。

道理上是简单的。两个函数，一个是个子元素从圆心到边缘的CSS路线设定，一个是回去的。然后是定时器判断是去还是回，每隔一定的时间驱动一次。

红影 发表于 2022-4-15 09:32

马黑黑 发表于 2022-4-13 22:03
道理上是简单的。两个函数，一个是个子元素从圆心到边缘的CSS路线设定，一个是回去的。然后是定时器判断 ...

js太能耐了，简洁的语句却是能营造出绚丽的效果。

马黑黑 发表于 2022-4-15 12:44

红影 发表于 2022-4-15 09:32
js太能耐了，简洁的语句却是能营造出绚丽的效果。

编程语言是高效的

红影 发表于 2022-4-15 13:36

马黑黑 发表于 2022-4-15 12:44
编程语言是高效的

是的，感受到了。

马黑黑 发表于 2022-4-15 17:56

红影 发表于 2022-4-15 13:36
是的，感受到了。

挺好的

加林森 发表于 2022-4-15 19:38

好强大的js，太厉害了。

红影 发表于 2022-4-15 20:08

马黑黑 发表于 2022-4-15 17:56
挺好的

是非常的好呢{:4_187:}

马黑黑 发表于 2022-4-15 20:43

红影 发表于 2022-4-15 20:08
是非常的好呢

还行吧

马黑黑 发表于 2022-4-15 20:46

加林森 发表于 2022-4-15 19:38
好强大的js，太厉害了。

一般一般

加林森 发表于 2022-4-15 20:48

马黑黑 发表于 2022-4-15 20:46
一般一般

还一般？我看得头差点两个大了。

马黑黑 发表于 2022-4-15 20:51

加林森 发表于 2022-4-15 20:48
还一般？我看得头差点两个大了。

那是因为你不一般{:5_117:}

加林森 发表于 2022-4-15 20:54

马黑黑 发表于 2022-4-15 20:51
那是因为你不一般

你世界第三，我是倒数第三才对。{:4_189:}
页: [1] 2
查看完整版本: CSS+JS小玩意：有去有回