利用原生JavaScript--实现小球无限转圈

MinaCat

已于 2023-02-25 09:59:04 修改

阅读量933

点赞数

文章标签： javascript

于 2022-06-11 19:42:51 首次发布

本文链接：https://blog.csdn.net/weixin_69437574/article/details/125237832

版权

本文介绍如何利用原生JavaScript创建一个无限制转动的小球效果。通过HTML布局，CSS定制样式，然后应用数学公式（角度 * π / 180 = 弧度）在JavaScript中实现小球的转动，最后调整边框透明度以增强视觉效果。

摘要由CSDN通过智能技术生成

实现效果：一个小球无限制的转动（转动速度利用requestAnimationFrame根据自己的系统，来实现）。

1.首先写html部分，代码部分灰常简单，看下图哦

 <!-- 圆心 -->
    <div class="ponit"></div> 
 <!-- 轨道 -->
    <div class="jin"></div>
 <!-- 移动的圆圈 -->
    <div class="call"></div>

2.写好了HTML之后再把相关的样式完成，这里的样式不定，可以根据自己的观点来设置样式，（具体写法看下图）

        .ponit {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            background-color: rgb(152, 203, 49);
        }
        
        .jin {
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            width: 600px;
            height: 600px;