谐波摇摆运动

下载代码

html

css

分享到微信朋友圈

html

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);
  }
}

JavaScript

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;");
};

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg