JavaScript实现狂欢舞动的小球

风或许自媒体

于 2018-04-18 18:26:40 发布

阅读量365

点赞数

分类专栏：前端从入门到放弃文章标签：小球动画舞动的小球装逼的前端动画炫酷动画

本文链接：https://blog.csdn.net/LY_code/article/details/79994776

版权

本文介绍如何利用JavaScript实现一个充满活力的狂欢舞动小球动画。通过简单的HTML代码，创建出视觉效果震撼的前端炫酷动画，为网页增添趣味性和装逼元素。

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

狂欢舞动的小球效果（也就一个html代码）：

代码（html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动的小球</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body,html{
            height: 100%;
            background-color: navajowhite;
        }
        body{
            position: relative;
        }
        div{
            border-radius: 50%;
            position: absolute;
        }

    </style>
</head>
<body>
<script>
    //页面有20个小球
    for(var i=0;i<20;i++){
        creatRandomBall(document.body);
    }
    /*
    * div 是要让他成每个div都会镜面反弹
    * 这个函数的作用就是实现单个div的镜面反弹效果
    * */
    function move(div) {
    //div所需的最大