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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0