效果演示：
代码目录：
主要代码实现：
部分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套
打卡 文章 更新 37 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
