使用CSS3实现进度条功能

12/12 编程语言 阅读 574 views 次 人气 0
摘要:

HTML 结构很简单,但不是 Single Element:

<div class="spinner"><i></i></div>

外层元素 .spinner 负责显示底部的半透明圆环:

.spinner { font-size: 20px; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2); }

.spinner 里的 i 元素被裁剪(clip)了一半,并做 0° 至 180° 的顺时钟旋转:

.spinner i { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; animation: spinner-circle-clipper 1s ease-in-out infinite; } @keyframes spinner-circle-clipper { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }

i 的 :after 伪元素同样被裁减了一半,并做 -180° 至 180° 的顺时钟旋转:

.spinner i:after { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; content: ''; animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3aa8ed; } @keyframes spinner-circle { 0% { transform: rotate(-180deg); } 100% { transform: rotate(180deg); } }

通过 2 个元素不断旋转导致的角度差,配合裁剪就能实现平滑的圆环长度变化效果。

评论

该文章不支持评论!

分享到: