可调速旋转风车

可调速的旋转风车
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        html, body {
            overflow: hidden;
        }

        .pinwheel {
            position: relative;
            width: 300px;
            height: 300px;
            left: 50%;
            margin-left: -150px;
            margin-top: 100px;
            z-index: 200;
        }

        .middle {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            position: absolute;
            background-color: silver;
            top: 137px;
            left: 137px;
            z-index: 200;
        }

        .red-pin {
            content: "";
            width: 100px;
            display: block;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
            position: relative;
            margin-top: 0px;
            -ms-transform: rotate(90deg);
            /* IE 9 */
            -webkit-transform: rotate(90deg);
            /* Chrome, Safari, Opera */
            transform: rotate(90deg);
        }
        .red-pin:before {
            content: "";
            width: 0px;
            display: block;
            border-bottom: 100px solid darkred;
            border-left: 100px solid transparent;
            position: absolute;
            margin-top: -100px;
            margin-left: 0px;
        }

        .blue-pin {
            content: "";
            width: 100px;
            display: block;
            border-top: 100px solid blue;
            border-left: 100px solid transparent;
            position: relative;
            margin-top: -50px;
            margin-left: 150px;
            -ms-transform: rotate(180deg);
            /* IE 9 */
            -webkit-transform: rotate(180deg);
            /* Chrome, Safari, Opera */
            transform: rotate(180deg);
        }
        .blue-pin:before {
            content: "";
            width: 0px;
            display: block;
            border-bottom: 100px solid navy;
            border-left: 100px solid transparent;
            position: absolute;
            margin-top: -100px;
            margin-left: 0px;
        }

        .yellow-pin {
            content: "";
            width: 100px;
            display: block;
            border-top: 100px solid yellow;
            border-left: 100px solid transparent;
            position: relative;
            margin-top: 50px;
            margin-left: 100px;
            -ms-transform: rotate(270deg);
            /* IE 9 */
            -webkit-transform: rotate(270deg);
            /* Chrome, Safari, Opera */
            transform: rotate(270deg);
        }
        .yellow-pin:before {
            content: "";
            width: 0px;
            display: block;
            border-bottom: 100px solid goldenrod;
            border-left: 100px solid transparent;
            position: absolute;
            margin-top: -100px;
            margin-left: 0px;
        }

        .green-pin {
            content: "";
            width: 100px;
            display: block;
            border-top: 100px solid green;
            border-left: 100px solid transparent;
            position: relative;
            margin-top: -150px;
            margin-left: -50px;
        }
        .green-pin:before {
            content: "";
            width: 0px;
            display: block;
            border-bottom: 100px solid darkgreen;
            border-left: 100px solid transparent;
            position: absolute;
            margin-top: -100px;
            margin-left: 0px;
        }

        .pinwheel-stem {
            width: 15px;
            height: 200px;
            display: block;
            position: relative;
            left: 50%;
            margin-left: -7.5px;
            background-color: silver;
            margin-top: -100px;
            z-index: 100;
        }

    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div class="pinwheel">
    <div class="middle"></div>
    <div class="red-pin"></div>
    <div class="blue-pin"></div>
    <div class="yellow-pin"></div>
    <div class="green-pin"></div>
</div>
<div class="pinwheel-stem"></div>

速度（数值越大越慢）：<input id="speed" type="text" value="100" width="20%">
<input type="button" id="go" value="GO">
<script src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<script>
    /*Javascript代码片段*/$(document).ready(
            function() {

                $('.pinwheel').velocity({
                    rotateZ: '360deg'
                }, {
                    duration: 2000,
                    loop: true,
                    easing: "linear"
                });

                $("#go").click(function(){
                    var speed = $('#speed').val();


                    $('.pinwheel').velocity("stop").velocity({
                        rotateZ: '360deg'
                    }, {
                        duration: speed+1,
                        loop: true,
                        easing: "linear"
                    });
                });
            });
</script>
</body>
</html>
猜你喜欢
