HTML+CSS+JS实现 ❤️悬挂摇摆的弹珠动画特效❤️

约定不等于承诺〃 2022-09-10 05:10 145阅读 0赞

> ##        效果演示： ##

![20210905093451475.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### 部分HTML代码 : ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>悬挂摇摆的弹珠动画特效</title>
    
        <script type="text/javascript" src="js/jquery.min.js"></script>
    
        <style type="text/css">
            html {
                background: black;
            }
    
            body {
                margin: 0;
                padding: 0;
            }
    
            .swinger {
                width: 1px;
                height: 0px;
                margin: 0 auto;
                position: relative;
                min-height: 400px;
            }
    
            li {
                position: absolute;
                top: 10px;
                left: 50%;
                width: 1px;
                height: 1px;
                list-style: none;
                animation: swing alternate infinite ease-in-out;
            }
    
            .string {
                display: block;
                width: 1px;
                background-color: rgba(255, 255, 255, 0.3);
            }
    
            .ball {
                display: block;
                width: 25px;
                height: 25px;
                -moz-border-radius: 30px;
                -webkit-border-radius: 30px;
                border-radius: 30px;
                background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjYmJiNWM3Ii8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiM3MzczNzQiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=') -3px -5px;
                background: -moz-radial-gradient(#bbb5c7, #737374 70%) -3px -5px;
                background: -webkit-radial-gradient(#bbb5c7, #737374 70%) -3px -5px;
                background: radial-gradient(#bbb5c7, #737374 70%) -3px -5px;
                border: 1px solid #c8c8c8;
                content: " ";
                position: relative;
                -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2), -2px -2px 4px 3px rgba(0, 0, 0, 0.1) inset;
                -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2), -2px -2px 4px 3px rgba(0, 0, 0, 0.1) inset;
                box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.2), -2px -2px 4px 3px rgba(0, 0, 0, 0.1) inset;
            }
    
            @keyframes swing {
                from {
                    -moz-transform: rotate(-25deg);
                    -ms-transform: rotate(-25deg);
                    -webkit-transform: rotate(-25deg);
                    transform: rotate(-25deg);
                }
                to {
                    -moz-transform: rotate(25deg);
                    -ms-transform: rotate(25deg);
                    -webkit-transform: rotate(25deg);
                    transform: rotate(25deg);
                }
            }
        </style>
    
    </head>
    
    <body>
        <ul class="swinger"></ul>
    
    
        <script>
            var swinger = $(".swinger");
    
            // Insert DOM
            for (var i = 0; i < 15; i++) {
                var stringContainer = document.createElement('li');
                var string = document.createElement('span');
                var ball = document.createElement('span');
                stringContainer.className = 'no' + i;
                string.className = "string";
                ball.className = "ball";
                swinger.append(stringContainer);
                $(stringContainer).append(string, ball);
            }
    
            var g = 9.8; // gravity
            var maxOsc = 15; // number of oscillations the longest pendulum performs in the cycle
            var duration = 240; // duration of one cycle in seconds
    
            // Calculate string heights
            var height = [];
            for (var j = 0; j < 15; j++) {
                var length = g * duration / Math.pow((2 * Math.PI * (maxOsc + j)), 2); // equation to calculate string lengths for harmonic wave pendulum
                height.push(length);
            }
            height.reverse();
    
            var sizeCoeff = 150;
            // Use harmonic pendulum equation to animate
            var elements = $("li");
            for (var k = 0; k < 15; k++) {
                var that = elements[k];
                var time = 2 * Math.PI * Math.sqrt(height[k] / g); // harmonic wave pendulum equation
                var size = sizeCoeff * height[k];
                $(".string", that).height(size * 10); // magic numbers for string length in px
                $(".ball", that)
                    .height(size)
                    .width(size)
                    .css('left', (-1 / 2) * size);
                $(that).attr("style", "animation-duration: " + time + "s;");
            };
        </script>
    
    </body>
    
    </html>

上面的jquery.min.js需要引入即可运行

> ## 源码获取 ##
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  37  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210905093451475.gif]: /images/20220829/11ca14642a6842d2b51dcf5cc8e20499.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/dd56a621647043a998dd92d21cc9247f.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/87373d0825794efe98ab3e2bf9df9860.png