css实现按角度计算圆段动画效果代码-html代码-BFW代码库

css实现按角度计算圆段动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现按角度计算圆段动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
@property --angle {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@keyframes angle { from { --angle: 0 } }

.circle-segment {
  --background-color: #efefef;
  --segment-color: yellow;
  --border-size: 2px;
  --border-color: black;
  --dot-size: 10px;
  --dash-size: 5px;
  --heightSegment: calc(50% * (1 - cos(var(--angle) * 1deg / 2)));

  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--border-size) solid var(--border-color);
  display: grid;
  background: 
    radial-gradient( 
			var(--border-color) calc(var(--dot-size) / 2), 
			#fff0 0
		),
    repeating-linear-gradient(90deg, 
			var(--border-color) 0px var(--dash-size), 
			#fff0 var(--dash-size) calc(var(--dash-size) * 2)
		) center var(--heightSegment) / 100% var(--border-size) no-repeat,
    l.........完整代码请登录后点击上方下载按钮下载查看