Adjustable speed rotating windmill
<!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> <!-- Do not add <body> tags to HTML snippets //--> <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 snippet*/$(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>
.