当前位置:Gxlcms > 前端框架 > CSS如何实现任意角度的扇形(代码示例)

CSS如何实现任意角度的扇形(代码示例)

时间:2021-07-01 10:21:17 帮助过:33人阅读

本篇文章给大家带来的内容是关于CSS如何实现任意角度的扇形(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>扇形绘制</title>
  5. <style>
  6. .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
  7. }
  8. .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的内容显示出来,使用clip属性,元素必须是absolute的 */ border-radius: 100px; background-color: #f00;
  9. /*-webkit-animation: an1 2s infinite linear; */
  10. }
  11. .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
  12. /*-webkit-animation: an2 2s infinite linear;*/
  13. }
  14. /*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}
  15. /*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}
  16. /*绘制一个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}
  17. /*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}
  18. /*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
  19. </st
  20. </head>
  21. <body> 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 <p>/绘制一个60度扇形/</p>
  22. <div class="shanxing shanxing1">
  23. <div class="sx1"></div>
  24. <div class="sx2"></div>
  25. </div>
  26. <p>/*绘制一个85度扇形*/</p>
  27. <div class="shanxing shanxing2">
  28. <div class="sx1"></div>
  29. <div class="sx2"></div>
  30. </div>
  31. <p>/*绘制一个向右扇形,90度扇形*/</p>
  32. <div class="shanxing shanxing3">
  33. <div class="sx1"></div>
  34. <div class="sx2"></div>
  35. </div>
  36. <p>/*绘制一个颜色扇形 */</p>
  37. <div class="shanxing shanxing4">
  38. <div class="sx1"></div>
  39. <div class="sx2"></div>
  40. </div>
  41. <p>/*绘制一个不同颜色半圆夹角 */</p>
  42. <div class="shanxing shanxing5">
  43. <div class="sx1"></div>
  44. <div class="sx2"></div>
  45. </div>
  46. </body>
  47. </html></pre>

下面这个是结合css+html5+javascript的一个更复杂的圆环图形

  1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  2. <%
  3. String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  5. <html>
  6. <head>
  7. <base href="<%=basePath%>">
  8. <title>circle</title>
  9. <style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
  10. }
  11. </style>
  12. </head>
  13. <body style="background:#FBFBFB;">
  14. <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> not suopport canvas </canvas>
  15. <div id="nihao"></div>
  16. <script>
  17. var text=document.getElementById("nihao");
  18. text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%
  19. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
  20. ctx.beginPath();
  21. ctx.lineWidth=10;
  22. ctx.strokeStyle="gray";
  23. ctx.arc(100,75,50,0,2*Math.PI);
  24. ctx.fillStyle="#FBFBFB";
  25. ctx.fill();
  26. ctx.stroke();
  27. ctx.beginPath();
  28. ctx.translate(100,75);
  29. ctx.rotate(-90*Math.PI/180);
  30. ctx.strokeStyle="#FFCFCF";
  31. ctx.arc(0,0,50,0,2*Math.PI*i);
  32. ctx.stroke();
  33. c.addEventListener("mouseover", function(e) {
  34. ctx.beginPath();
  35. ctx.strokeStyle="gray";
  36. ctx.arc(0,0,50,0,2*Math.PI);
  37. ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
  38. console.log("step:"+step); if(step<finish){
  39. step=step+0.01;
  40. ctx.beginPath();
  41. ctx.strokeStyle="#FFCFCF";
  42. ctx.arc(0,0,50,0,2*Math.PI*step);
  43. ctx.stroke();
  44. }else{
  45. clearInterval(internal);
  46. }
  47. }, 0.5)
  48. }, true) </script>
  49. </body>
  50. </html></pre>

以上就是CSS如何实现任意角度的扇形(代码示例)的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行