CSS如何实现任意角度的扇形（代码示例）-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

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

不言

Nov 24, 2018 pm 02:37 PM

githubjavascriptmysqlnginxspring

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

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

<html>
<head>
    <meta charset="UTF-8">
    <title>扇形绘制</title>
    <style> 
    .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow;
        } 
        .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;
            /*-webkit-animation: an1 2s infinite linear; */
        } 
        .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00;
            /*-webkit-animation: an2 2s infinite linear;*/
        }
        /*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);}

        /*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);}

        /*绘制一个向右扇形，90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);}

        /*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;}

        /*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;}
</st
</head>
<body> 扇形制作原理，底部一个纯色原形，里面2个相同颜色的半圆，可以是白色,内部半圆按一定角度变化，就可以产生出扇形效果 <p>/绘制一个60度扇形/</p>

<div class="shanxing shanxing1">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个85度扇形*/</p>
<div class="shanxing shanxing2">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个向右扇形，90度扇形*/</p>
<div class="shanxing shanxing3">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<p>/*绘制一个颜色扇形 */</p>
<div class="shanxing shanxing4">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<p>/*绘制一个不同颜色半圆夹角 */</p>
<div class="shanxing shanxing5">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

</body> 
</html>

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

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>circle</title>

    <style type="text/css"> #myCanvas{} #nihao{ position: absolute; top:10px; z-index: 1;
    }
    </style>
  </head>
<body style="background:#FBFBFB;">

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> not suopport canvas </canvas>
<div id="nihao"></div>
<script>
var text=document.getElementById("nihao");
text.innerHTML="woshiwuxinguo"; var i=0.9;//这里默认设置好评率为90%

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="gray";
ctx.arc(100,75,50,0,2*Math.PI);
ctx.fillStyle="#FBFBFB";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.translate(100,75);
ctx.rotate(-90*Math.PI/180);
ctx.strokeStyle="#FFCFCF";
ctx.arc(0,0,50,0,2*Math.PI*i);
ctx.stroke();
c.addEventListener("mouseover", function(e) {
ctx.beginPath();
ctx.strokeStyle="gray";
ctx.arc(0,0,50,0,2*Math.PI);
ctx.stroke(); var finish=i; var step=0; var internal=setInterval(function(e) {
console.log("step:"+step); if(step<finish){
    step=step+0.01;
    ctx.beginPath();
    ctx.strokeStyle="#FFCFCF";
    ctx.arc(0,0,50,0,2*Math.PI*step);
    ctx.stroke();
    }else{
    clearInterval(internal);
    }
}, 0.5)
}, true) </script> 

</body>
</html>

Atas ialah kandungan terperinci CSS如何实现任意角度的扇形（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Berapa banyak kekhususan yang ada @rules, seperti @keyframes dan @media?Apr 18, 2025 am 11:34 AM

Saya mendapat soalan ini pada hari yang lain. Pemikiran pertama saya ialah: soalan pelik! Kekhususan adalah mengenai pemilih, dan at-peraturan bukan pemilih, jadi ... tidak relevan?

Bolehkah anda bersarang @media dan @support pertanyaan?Apr 18, 2025 am 11:32 AM

Ya, anda boleh, dan ia tidak begitu penting dalam perintah apa. Preprocessor CSS tidak diperlukan. Ia berfungsi dalam CSS biasa.

Cache Cache PantasApr 18, 2025 am 11:23 AM

Anda pasti pasti menetapkan tajuk cache yang jauh pada aset anda seperti CSS dan JavaScript (dan imej dan fon dan apa sahaja yang lain). Yang memberitahu penyemak imbas

Dalam mencari timbunan yang memantau kualiti dan kerumitan CSSApr 18, 2025 am 11:22 AM

Ramai pemaju menulis tentang bagaimana untuk mengekalkan asas CSS, namun tidak banyak daripada mereka menulis tentang bagaimana mereka mengukur kualiti asas kod tersebut. Pasti, kita ada

Datalist adalah untuk mencadangkan nilai tanpa menguatkuasakan nilaiApr 18, 2025 am 11:08 AM

Pernahkah anda mempunyai bentuk yang perlu menerima sedikit teks yang sewenang -wenangnya? Seperti nama atau apa sahaja. Itu ' s betul -betul apa. Terdapat banyak

Persidangan Depan di ZürichApr 18, 2025 am 11:03 AM

Saya sangat teruja untuk menuju ke Zürich, Switzerland untuk persidangan depan (suka nama dan url!). Saya tidak pernah ke Switzerland sebelum ini, jadi saya teruja

Membina aplikasi tanpa pelayan penuh dengan pekerja CloudflareApr 18, 2025 am 10:58 AM

Salah satu perkembangan kegemaran saya dalam pembangunan perisian adalah kedatangan tanpa pelayan. Sebagai pemaju yang mempunyai kecenderungan untuk terjebak dalam butiran

Membuat Laluan Dinamik dalam Aplikasi NUXTApr 18, 2025 am 10:53 AM

Dalam siaran ini, kami akan menggunakan demo kedai e -dagang yang saya bina dan digunakan untuk Netlify untuk menunjukkan bagaimana kami boleh membuat laluan dinamik untuk data masuk. Ia adil

See all articles