android荧光进度条,CSS3 彩色荧光棒进度条

weixin_39719042

于 2021-06-03 19:43:10 发布

阅读量228

点赞数

文章标签： android荧光进度条

这篇博客详细介绍了如何使用CSS和HTML创建一个带有渐变背景和模糊边框的横向进度条动画。通过设置`width`、`height`、`position`等属性，以及利用伪元素`::before`和`::after`，配合关键帧动画`@keyframes`，实现了颜色平滑过渡的视觉效果。同时，文章还展示了如何通过`z-index`和`opacity`调整元素的层级和透明度，以增强整体的视觉吸引力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

body,

html,

.wrapper {

width: 100%;

height: 100%;

}

.wrapper {

position: relative;

background: #e7f0f7;

}

.progressbar {

display: block;

position: absolute;

z-index: 9;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 400px;

height: 30px;

}

.progressbar::before,

.progressbar::after {

content: '';

display: block;

position: absolute;

z-index: 99;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 15px;

background-image: -webkit-linear-gradient(0deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);

background-image: linear-gradient(90deg, #e91e63 0%, #e91e63 20%, #03a9f4 20%, #03a9f4 40%, #8bc34a 40%, #8bc34a 60%, #ffeb3b 60%, #ffeb3b 80%, #ff5722 80%, #ff5722 100%);

background-position: 0 0;

background-repeat: repeat-x;

-webkit-animation: movebar 5s linear infinite;

animation: movebar 5s linear infinite;

}

.progressbar::before {

box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);

}

.progressbar::after {

z-index: 9;

top: 6px;

-webkit-filter: blur(16px);