lamp网站开发实战,浦东新区中国建设银行官网站,邢台网红桥,辽宁省建设工程信息网造价师签章使用纯 CSS Animation conic-gradient 实现一个环形图。 饼图的实现思路和环形图一样#xff0c;去掉中间的圆形遮盖 after 伪类元素即可。 一、构建基础样式
构建圆形节点和中间的遮盖元素。
stylebody {background-color: rgb(130, 226, 255);}.circle {top: 16…使用纯 CSS Animation conic-gradient 实现一个环形图。 饼图的实现思路和环形图一样去掉中间的圆形遮盖 after 伪类元素即可。 一、构建基础样式
构建圆形节点和中间的遮盖元素。
stylebody {background-color: rgb(130, 226, 255);}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border: 1px solid white;border-radius: 50%;position: relative;::after {content: ;position: absolute;top: 7px;left: 7px;width: 286px;height: 286px;border-radius: 50%;background: rgb(0, 183, 255);display: block;box-sizing: border-box;}}
/stylebodydiv classcircle/div
/body 二、设置环形、饼图
设置锥形渐变设置三个颜色transparentwhitetransparent方便后边通过动画动态调整
.circle {...background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg);::after {...}
} 三、添加动画
添加动画前将 background 重置一下
.circle {...background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg);::after {...}
} 然后添加动画
.circle {...animation: rotated 10s linear infinite;::after {...}
}
keyframes rotated {0% {background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg);}12% {background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg);}25% {background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg);}37% {background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg);}50% {background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg);}62% {background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg);}75% {background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg);}87% {background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg);}100% {background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg);}
} 可以看到为渐变gradient的元素设置animation、transition是不会有过渡的效果。这是由于gradient属性并不像width这类型的属性一样无法通过gradient的变化实现过渡效果。
四、解决过渡不生效的问题
使用 property 自定义属性在 gradient 各个颜色的起始、结束角度上使用。
重新调整 keyframes 中变化的属性不改变 gradient而是改变我们自定义的 angle 属性。
CSS变量和property-CSDN博客
stylebody {...}property --angle1 {syntax: angle;initial-value: 0deg;inherits: false;}property --angle2 {syntax: angle;initial-value: 0deg;inherits: false;}.circle {...background: conic-gradient(transparent 0 var(--angle1), white var(--angle1) var(--angle2), transparent var(--angle2) 360deg);...::after {...}}keyframes rotated {0% {--angle1: 0deg;--angle2: 0deg;/* background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg); */}12% {--angle1: 0deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg); */}25% {--angle1: 90deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg); */}37% {--angle1: 90deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg); */}50% {--angle1: 180deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg); */}62% {--angle1: 180deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg); */}75% {--angle1: 270deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg); */}87% {--angle1: 270deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg); */}100% {--angle1: 360deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg); */}}
/style 完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylebody {background-color: rgb(130, 226, 255);}property --angle1 {syntax: angle;initial-value: 0deg;inherits: false;}property --angle2 {syntax: angle;initial-value: 0deg;inherits: false;}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border-radius: 50%;position: relative;background: conic-gradient(transparent 0 var(--angle1), white var(--angle1) var(--angle2), transparent var(--angle2) 360deg);animation: rotated 10s linear infinite;::after {content: ;position: absolute;top: 7px;left: 7px;width: 286px;height: 286px;border-radius: 50%;background: rgb(0, 183, 255);display: block;box-sizing: border-box;}}keyframes rotated {0% {--angle1: 0deg;--angle2: 0deg;/* background: conic-gradient(transparent 0 0, white 0 0, transparent 0 360deg); */}12% {--angle1: 0deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 0, white 0 90deg, transparent 90deg 360deg); */}25% {--angle1: 90deg;--angle2: 90deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 90deg, transparent 90deg 360deg); */}37% {--angle1: 90deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 90deg, white 90deg 180deg, transparent 180deg 360deg); */}50% {--angle1: 180deg;--angle2: 180deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 180deg, transparent 180deg 360deg); */}62% {--angle1: 180deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 180deg, white 180deg 270deg, transparent 270deg 360deg); */}75% {--angle1: 270deg;--angle2: 270deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 270deg, transparent 270deg 360deg); */}87% {--angle1: 270deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 270deg, white 270deg 360deg, transparent 360deg 360deg); */}100% {--angle1: 360deg;--angle2: 360deg;/* background: conic-gradient(transparent 0 360deg, white 360deg 360deg, transparent 360deg 360deg); */}}/style/headbodydiv classcircle/div/body
/html饼图例子
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylebody {background-color: rgb(130, 226, 255);}property --angle {syntax: angle;initial-value: 0deg;inherits: false;}.circle {top: 160px;left: 160px;width: 300px;aspect-ratio: 1;border: 1px solid white;border-radius: 50%;position: relative;background: conic-gradient(white 0 var(--angle), transparent var(--angle) 360deg);transition: --angle 0.5s linear;:hover {--angle: 360deg;}}/style/headbodydiv classcircle/div/body
/htmlGIF 略显卡顿
