仅做记录学习

hmtl部分

<div class="fashion-audio" id="J_FashionAudio">点我</div>

css样式部分

.fashion-audio {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    line-height: 100px;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
    color: #7369ff;
}

.fashion-audio .a-item {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -1px;
    width: 2px;
    height: 3px;
    background-color: #7369ff;
    -webkit-transform-origin: 0 50px;
    -moz-transform-origin: 0 50px;
    -ms-transform-origin: 0 50px;
    -o-transform-origin: 0 50px;
    transform-origin: 0 50px;
    -webkit-transition: height .2s linear, top .2s linear;
    -o-transition: height .2s linear, top .2s linear;
    transition: height .2s linear, top .2s linear;
    border-radius: 5px 5px 0 0;
}

js部分

function() {
    var fa = document.getElementById('J_FashionAudio');
    var arc = 2;
    var deg = 0;
    var max = 15;
    var min = 3;
    var prefix = 'transform' in fa.style ? '' : 'webkit';
    var rs = [];
    for (var i = 1; deg < 360; i++) {
        var item = document.createElement('div');
        deg = arc * i;
        item.className = 'a-item';
        item.style[prefix ? 'webkitTransform' : 'transform'] = 'rotate(' + deg + 'deg) translateY(-100%)';
        fa.appendChild(item);
        i++;
        rs.push(item);
    }

    fa.addEventListener('click', function() {
        var ps = [];
        var total = rs.length;
        for (; ps.length < 8;) {
            ps.push(Math.floor(Math.random() * total));
        }
        var cs = [];
        for (var j = 0, jl = ps.length; j < jl; j++) {
            cs.push(ps[j]);
            cs.push((ps[j] + 1) % total, (ps[j] + 2) % total);
            cs.push((ps[j] - 1 + total) % total, (ps[j] - 2 + total) % total);
        }
        for (var k = 0, kl = cs.length; k < kl; k++) {
            rs[cs[k]].style.height = max * Math.random() + min + 'px';
        }
        setTimeout(function() {
            for (var l = 0, ll = cs.length; l < ll; l++) {
                rs[cs[l]].style.height = min + 'px';
            }
        }, 400);
    }, false);
  
    setInterval(function() {
      fa.click();
    }, 200);
})();

来自原文出处：

zhuanlan.zhihu.com/p/28440248