滚动页面旋转齿轮

     本例代码演示了滚动网页，齿轮转动的效果，增加网页动画效果。

    代码演示：查看演示

                                 

    css代码：

 html{color: #333;background-attachment: fixed;background-size: cover;background-repeat: no-repeat;border: solid #4ECDC4 20px;}
    body{margin: 2rem;font-family: Roboto Condensed, sans-serif;background: #f7fff7;margin: 200px 0 0 0;font-family: serif;line-height: 1.7;font-size: 100%;}
    h1{text-align: center;font-size: 1.7em;line-height:.8em;}
    p{display: block;-webkit-margin-before: 1em;-webkit-margin-after:1em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;}
    nav{background-color: #4ECDC4;position: fixed;top: 0;width: 100%;height: 140px;}
    nav .logo{position: fixed;top: 20px;top: 20px;left: 50%;margin-left: -50px;width: 100px;height: auto;}
    main{max-width: 900px;width: 60%;margin: 0 auto;font-size: 2rem;}

　　js代码：

  $(window).scroll(function () {
        var theta = $(window).scrollTop() / 600 % Math.PI;
        $('#logo').css({
            transform: 'rotate(' + theta + 'rad)'
        });
    });