uniapp純CSS實現圓形進度條組件

niapp純CSS實現圓形進度條組件。圓形進度條組件組合做一個步驟進度組件是非常常見。

純 CSS 實現圓形進度條組件有以下幾個好處：

輕量級：由于純 CSS 實現，無需額外的 JavaScript 或圖像資源，所以組件的文件大小相對較小，加載速度快，對頁面性能的影響較小。

兼容性好：CSS 是 Web 標準的一部分，幾乎所有現代瀏覽器都支持 CSS。因此，純 CSS 實現的圓形進度條組件在各種設備和瀏覽器上都能正常顯示和運行。

可定制性強：CSS 提供了豐富的樣式屬性和選擇器，可以靈活地自定義圓形進度條的樣式、顏色、大小、動畫效果等，以滿足不同項目和設計需求。

簡單易用：純 CSS 實現的圓形進度條組件通常使用簡單，只需要在 HTML 中添加相應的 CSS 類或樣式即可，無需復雜的配置或調用 JavaScript 函數。

性能優化：由于純 CSS 實現的圓形進度條不涉及 JavaScript 的計算和操作，可以減輕客戶端的計算負擔，提高頁面的響應速度和性能。

<template>
<view class="flex align-center diygw-col-24 justify-center">
<view class="progress-circle " :class="'progress-'+innerPercent" :style="{
'--not-progress-color':notProgressColor,
'--bg-color':bgColor,
'--color':color,
'--progress-color':progressColor,
'--width':$u.addUnit(width),
'--font-size':$u.addUnit(fontSize),
'--border-width':$u.addUnit(borderWidth)
}">
<view class="inner">
<view class="progress-number">{{innerPercent}}%</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
width: {
type: Number,
default: 100
},
borderWidth: {
type: Number,
default: 20
},
bgColor: {
type: String,
default: '#fff'
},
notProgressColor: {
type: String,
default: '#ddd'
},
progressColor: {
type: String,
default: '#07c160'
},
color:{
type: String,
default: '#07c160'
},
fontSize:{
type: Number,
default: 24
},
/**
* 進度(0-100)
*/
percent: {
type: Number,
default: 0
},
/**
* 是否動畫
*/
animate: {
type: Boolean,
default: true
},
/**
* 動畫速率
*/
rate: {
type: Number,
default: 5
}
},
computed: {
/**
* @private
*/
complete() {
return this.innerPercent==100
}
},
watch: {
percent(percent) {
this.setPercent()
}
},
data() {
return {
innerPercent: 0,
timeout: null
}
},
mounted() {
this.setPercent()
},
methods: {
setPercent() {
if (this.animate) {
this.stepTo(true)
} else {
this.innerPercent=this.percent
}
},
clearTimeout() {
clearTimeout(this.timeout)
Object.assign(this, {
timeout: null
})
},
stepTo(topFrame=false) {
if (topFrame) {
this.clearTimeout()
}
if (this.percent > this.innerPercent && !this.complete) {
this.innerPercent=this.innerPercent+1
}
if (this.percent < this.innerPercent && this.innerPercent > 0) {
this.innerPercent--
}
if (this.innerPercent !==this.percent) {
this.timeout=setTimeout(()=> {
this.stepTo()
}, this.rate)
}
}
}
}
</script>
<style lang="scss" scoped>
.progress-circle {
--progress-color:#63B8FF;
--not-progress-color:#ddd;
--bg-color:#fff;
--width: 240rpx;
--border-width: 10rpx;
--color:#777;
--font-size:1.5rem;

$diythemeColor:var(--progress-color) ;
$diybackColor: var(--not-progress-color) ;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--width);
height: var(--width);
border-radius: 50%;
transition: transform 1s;
background-color: $diybackColor;
padding:var(--border-width);

.inner{
width:100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index:1;
background-color: var(--bg-color);
}
&:before {
content: '';
left:0;
top:0;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $diythemeColor;
}

$step: 1;
$loops: 99;
$increment: 3.6;
$half: 50;

@for $i from 0 through $loops {
&.progress-#{$i * $step}:before {
@if $i < $half {
$nextDeg: 90deg+($increment * $i);
background-image: linear-gradient(90deg, $diybackColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
@else {
$nextDeg: -90deg+($increment * ($i - $half));
background-image: linear-gradient($nextDeg, $diythemeColor 50%, transparent 50%, transparent), linear-gradient(270deg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
}
}

.progress-number {
width: 100%;
line-height: 1;
text-align: center;
font-size: var(--font-size);
color: var(--color);
}
}
</style>

SS的shape-outside屬性允許你定義一個元素（通常是浮動元素）的外部形狀。這個形狀可以是矩形、圓形或者自定義路徑，它會影響其周圍浮動元素的布局。shape-outside可以用于創造一些視覺上非常有趣的文本環繞效果，比如讓文本環繞一張圖片、一個形狀或者其他浮動元素。

一個典型的效果如下所示：

1. 基本用法

想要完成上面的效果，需要先掌握shape-outside的一些基本用法：

矩形 (rectangle): 使用border-radius屬性可以創建圓角矩形。

.float-element {
  shape-outside: rectangle(10px, 10px, 10px, 10px); /* 設置圓角 */
}

圓形 (circle): 可以指定圓形的半徑。

.float-element {
  shape-outside: circle(50%); /* 半徑為元素寬度的50% */
}

橢圓形 (ellipse): 可以指定橢圓形的兩個半徑。

.float-element {
  shape-outside: ellipse(50% 25%); /* 水平半徑50%，垂直半徑25% */
}

多邊形 (polygon): 可以創建具有任意數量邊的多邊形，需要指定每個頂點的坐標。

.float-element {
  shape-outside: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Optional: to clip the element itself to a circle */

}

路徑 (path): 使用SVG路徑定義形狀。

.float-element {
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
}

2. 文本環繞

shape-outside屬性最常用于創建文本環繞效果。當一個浮動元素的shape-outside屬性設置為margin-box、border-box或padding-box時，文本會環繞該元素的相應盒子模型邊緣。此外，還可以使用url()函數引用圖片或SVG的路徑作為形狀。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clip Text Around Image</title>
<style>
  .float-image {
    float: left;
    shape-outside: circle(50%); /* 50% of the element's width */
    width: 200px; /* Width of the image */
    height: 200px; /* Height of the image */
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url('./強.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire element */
    clip-path: circle(50%); /* Optional: to clip the element itself to a circle */
  }

</style>
</head>
<body>

<div class="float-image"></div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed blandit ligula non leo cursus, vitae eleifend nisl molestie. Nulla quis ligula at mauris rhoncus vestibulum. Maecenas at nulla ipsum. Donec rutrum congue leo at malesuada. Integer auctor tristique sem, vitae lacinia sem sagittis sed. Nullam auctor, enim nec pellentesque aliquam, arcu dui lacinia mauris, id lobortis enim odio id felis.
  </p>

</body>
</html>

在這個示例中：

.float-image 類定義了一個浮動的圓形圖片元素，其中 shape-outside 屬性使文本環繞該圓形。
.text-wrap 類定義了文本塊的樣式，它有一個左邊距，以適應圖片的寬度和邊距。
CSS 的 background-image 屬性用于將圖片設置為元素的背景，并使用 background-size: cover; 確保圖片完全覆蓋元素，而不改變其寬高比。
一個可選的 clip-path: circle(50%); 被添加到 .float-image，這樣圖片本身也被裁剪成圓形。
HTML 中的 <div> 元素用于創建圖片和文本環繞效果。

兼容性和注意事項

shape-outside是CSS Shapes Module Level 1的一部分，并非所有瀏覽器都支持。
當使用自定義形狀時，確保為不支持shape-outside的瀏覽器提供一個回退樣式。
使用shape-outside時，要注意性能影響，尤其是使用復雜路徑或圖片作為形狀時。

3. 更多示例

示例 1：使用圓形環繞圖片

.float-image {
  float: left;
  shape-outside: circle(50%); /* 50% 指的是圖片寬度的一半 */
  width: 200px; /* 圖片的寬度 */
  height: 200px; /* 圖片的高度 */
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 確保圖片覆蓋整個浮動元素 */
}

在這個例子中，文本將環繞一個圓形圖片。

示例 2：使用橢圓形環繞圖片

.float-image {
  float: left;
  shape-outside: ellipse(50% 25%); /* 水平半徑是寬度的50%，垂直半徑是高度的25% */
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

這里文本環繞的是一個橢圓形圖片。

示例 3：使用多邊形環繞文本

.float-shape {
  float: left;
  shape-outside: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: #f0f0f0; /* 背景顏色，用于演示形狀 */
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

在這個例子中，文本將環繞一個鉆石形狀的元素。

示例 4：使用SVG路徑環繞文本

.float-svg {
  float: left;
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

這里文本環繞的是一個通過SVG路徑定義的自定義形狀。

示例 5：文本環繞帶有圖片的復雜形狀

.float-image-complex {
  float: left;
  shape-outside: url('path/to/complex-shape.svg#shapeID');
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  width: 200px;
  height: 150px;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

在這個例子中，文本環繞的是一個SVG文件中定義的復雜形狀，并且該形狀元素背后有一張圖片。

示例 6：使用margin屬性增加環繞空間

.float-shape {
  float: left;
  shape-outside: circle(50%);
  margin: 20px; /* 增加環繞空間 */
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
}

通過增加margin屬性的值，可以讓文本與形狀之間有更多的空間。

4. shape-outside 使用場景

shape-outside屬性除了用于環繞文本之外，還可以用于其他一些創造性的布局和設計效果。例如：

1. 創造視覺焦點

通過使用shape-outside創建非矩形的浮動元素，可以吸引用戶的注意力，引導他們的視線。例如，一個心形或星形的浮動元素可以作為頁面上的一個視覺焦點。

2. 設計響應式布局

在響應式設計中，可以使用shape-outside來創建適應不同屏幕尺寸的布局。例如，一個形狀可以根據視口的大小變化而變化，從而影響其周圍元素的布局。

3. 制作有趣的按鈕和鏈接

可以給按鈕或鏈接設置shape-outside，讓文本環繞這些形狀，創造獨特的交互元素。

4. 增強數據可視化

在數據可視化中，可以使用shape-outside來增強圖表和圖形的視覺效果，例如，讓文本環繞一個餅圖或柱狀圖的輪廓。

5. 制作動畫效果

結合CSS動畫，shape-outside可以用于創建動態變化的形狀，從而影響其周圍元素的布局和動畫效果。

6. 增強表單元素的視覺效果

可以讓表單元素如輸入框或按鈕采用非標準的形狀，以提升表單的視覺吸引力。

7. 創造藝術作品和背景

使用shape-outside可以創建復雜的藝術作品或背景圖案，這些形狀可以是幾何圖形、自然形狀或其他抽象圖案。

8. 制作導航菜單

可以設計一個非傳統的導航菜單，其中菜單項采用獨特的形狀，并且菜單項周圍的文本環繞這些形狀。

9. 增強品牌元素

如果品牌有特定的形狀標志或圖案，可以使用shape-outside將這些元素融入到網頁設計中，增強品牌識別度。

10. 制作游戲界面

在游戲或互動應用中，可以使用shape-outside來創建有趣的界面元素，如環繞特定形狀的得分或生命值顯示。

圖片添加區域鏈接的基本寫法

首先我們看看效果：

實現這樣的功能需要學習以下幾點內容。

1.認識<img/><map><area/></map>基本結構

首先復制一個html框架，命名為“圖片區域鏈接.html”,示例代碼如下：

<!DOCTYPE HTML> 
  <html>  
  <head>   
  <title>圖片區域鏈接</title>  
  <meta charset="utf-8">  
  </head>   
  <body>  

  </body>   
  </html>

向<body></body>中添加<img><map><area/></map>基本結構，示例代碼如下：

 <body>  
 <img/>
   <map>
   <area/>
   </map>
 </body>

指定要添加區域鏈接的圖片的路徑，如下：

 <img src="img/image1.jpg"/>
   <map>
   <area/>
   </map>

讓<img>標簽通過<map>的名字來驅使<map>為自己工作。

需要兩步，第一，給<map>起名字，name=“map”，為了兼容所有的瀏覽器，還要加上id=“map”（有的瀏覽器只認id）。

第二，讓<img>叫出<map>的名字或id，usemap="#map"。大家要注意，叫名字時要加#。這個在之前的教程中也經常出現。

示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area/>
   </map>

下面來劃分區域。

2.為圖片劃分區域的方法

<area>是用來劃分區域的標簽，area也是“”區域“”的意思。

默認的shape（形狀）屬性有“矩形（rect）”、“圓形（circ）”、“多邊形（poly）”三個值。

分別添加三個形狀，示例代碼如下：

 <img src="img/image1.jpg" usemap="#map"/>
   <map name="map" id="map">
   <area shape="rect"/>
   <area shape="circ"/>
   <area shape="poly"/>
   </map>

下面我們就要為區域規定參數，也就是在圖像上的位置和范圍大小。

為<area>添加coords屬性可以指定區域的位置和范圍。

如果shape="rect" 則coords由四個參數組成。例如coords="0,0,50,50"。從左到右，兩兩一組，組成兩個平面坐標，即（0,0）和（50，50），單位是“像素”，矩形區域如下：

如果shape=“circ”，coords=“50,50,10”。（50,50）定義了圓心，10是半徑。如圖：

如果shape=“poly”，coords的參數不少于3對！注意是“對”！從左到右，兩個數就是一組坐標，三組坐標可以確定一個三角形，多組坐標可以確定多邊形。例如

這組參數畫出了下圖中殲20的邊框線（600像素*400像素，如果圖像的長寬像素數變了，參數就不正確了），如圖：

這時，大家會有一個問題：如何才能知道圖像中某個像素點的坐標呢？

3.使用Gimp軟件精準定位圖片區域

使用Gimp軟件可以解決這個問題。

Gimp是一款類似于Photoshop的數字圖像處理軟件，不同的是，Gimp是開源免費的。

下載地址：https://www.gimp.org/

雙擊安裝即可，注意選擇一下安裝目錄。

完成安裝之后打開，界面如下：

點擊“文件”找到“打開”：

選擇要打開的圖片名字：

點擊名稱后，右邊會有圖像預覽，點擊“打開”即可：

打開后如圖：

把鼠標放到圖像的任意位置，看左下角：

這里就會顯示我們鼠標所在的像素坐標數值。

這樣我們就能方便地寫“poly”的coords了。

請在空閑時找一張圖片演練一下吧！

4.為區域添加鏈接

在<area/>標簽中添加href屬性即可指定鏈接路徑，如下：

href="https://www.zhihu.com/question/284642168"

添加title屬性可以在鼠標滑過鏈接區域時提示讀者，如下：

title="殲20氣動外形分析"

今天的內容結束了，圖像區域鏈接在使用時還有一些注意事項，我們下次再詳細討論。

使用碎片時間，學習完整知識！關注大魚師兄，一起精研技藝。

整合營銷服務商