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

效果演示：

代码目录：

主要代码实现：

部分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 DOMfor (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; // gravityvar maxOsc = 15; // number of oscillations the longest pendulum performs in the cyclevar duration = 240; // duration of one cycle in seconds// Calculate string heightsvar 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 pendulumheight.push(length);}height.reverse();var sizeCoeff = 150;// Use harmonic pendulum equation to animatevar 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 equationvar 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需要引入即可运行