可调速旋转风车

2018-02-27 11:08:16来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

可调速的旋转风车

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta 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 >    <div ></div>    <div ></div>    <div ></div>    <div ></div>    <div ></div></div><div ></div>速度(数值越大越慢):<input  type="text" value="100" width="20%"><input type="button"  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>

 

 

 

 

 

 

.

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台