大佬教程收集整理的这篇文章主要介绍了html css 旋转 圆,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-3.1.1.min.js"></script> <style type="text/css"> .circleHome { } .circle { position:absolute; top:10px; left:10px; display: none; border-radius: 50%; height: 300px; width: 300px; margin: 0; border:10px solid #ff0; } .circle2 { position: relative; top: 10px; left: 10px; display: block; border-radius: 50%; height: 300px; width: 300px; margin: 0; border-top: 10px solid #f00; border-right: 10px solid #ff0; border-bottom: 10px solid #ff0; border-left: 10px solid #ff0; } </style> <script type="text/javascript"> $(function () { var $elie = $(".circle2");// $(SELEctorForElementsToRotatE); rotate(0); function rotate(degreE) { // For webkit browsers: e.g. Chrome $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)' }); // For Mozilla browser: e.g. Firefox $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)' }); // For Mozilla browser: e.g. IE $elie.css({ 'transform': 'rotate(' + degree + 'deg)' }); // Animate rotation with a recursive call setTimeout(function () { rotate(++degreE); }, 1); } }); </script></head><body> <form id="form1" runat="server"> <div>111</div> <div class="circleHome"> <div class="circle"></div> <div class="circle2"></div> </div> <div>222</div> </form></body></html>
以上是大佬教程为你收集整理的html css 旋转 圆全部内容,希望文章能够帮你解决html css 旋转 圆所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。