进度条的美化(一)

这里记录一种用css控制进度条美化的效果

css代码:

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-moz-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-ms-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 0 0
    }

    to {
        background-position: 40px 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }

    to {
        background-position: 0 0
    }
}
.progress {
    display: block;
    width:600px;
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#f9f9f9));
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: -o-linear-gradient(top,#f5f5f5,#f9f9f9);
    background-image: linear-gradient(to bottom,#f5f5f5,#f9f9f9);
    background-repeat: repeat-x;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5',endColorstr='#fff9f9f9',GradientType=0);
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
}

.progress .bar {
    float: left;
    width: 80%;
    height: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    background-color: #0e90d2;
    background-image: -moz-linear-gradient(top,#149bdf,#0480be);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#149bdf),to(#0480be));
    background-image: -webkit-linear-gradient(top,#149bdf,#0480be);
    background-image: -o-linear-gradient(top,#149bdf,#0480be);
    background-image: linear-gradient(to bottom,#149bdf,#0480be);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff149bdf',endColorstr='#ff0480be',GradientType=0);
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.15);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: width .6s ease;
    -moz-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

.progress-striped .bar {
    -webkit-background-size: 40px 40px;
    -moz-background-size: 40px 40px;
    -o-background-size: 40px 40px;
    background-size: 40px 40px
}

.progress.active .bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -moz-animation: progress-bar-stripes 2s linear infinite;
    -ms-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite
}

.progress-danger.progress-striped .bar {
    background-image: -webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,0.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,0.15)),color-stop(0.75,rgba(255,255,255,0.15)),color-stop(0.75,transparent),to(transparent));
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -moz-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)
}

html代码:

<span class="progress progress-danger progress-striped active">
    <span class="bar"></span>
</span>

实现效果:

转载于:https://www.cnblogs.com/shenpeng/p/10974032.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 在Delphi中,我们可以通过使用自定义绘制和美化进度条来提升应用程序的外观。 第一步是自定义绘制。我们可以使用TProgressBar组件的OnCustomDraw事件来自定义绘制进度条。在这个事件中,我们可以使用Canvas属性来绘制自定义的外观。例如,我们可以使用渐变色、纹理或图像来绘制进度条的背景和填充。 第二步是美化进度条的外观。我们可以使用Delphi资源文件(.res)来包含进度条需要使用的样式和图像。通过将这些样式和图像添加到资源文件中,我们可以实现更多的个性化效果。然后,我们可以在进度条的OnCustomDraw事件中使用这些资源来绘制进度条。 另外,我们还可以为进度条添加动画效果。例如,我们可以使用Timer组件来定时改变进度条的值,从而实现进度条的动态效果。我们可以在Timer的OnTimer事件中更新进度条的值,并重绘进度条以显示新的进度。 此外,如果需要更高级的美化效果,也可以考虑使用第三方组件库。Delphi上有许多第三方组件库可用于美化进度条,例如TMS VCL UI Pack、DevExpress VCL等。这些组件库提供了各种预设的进度条样式和动画效果,可以简化美化进度条的工作。 综上所述,通过使用Delphi的自定义绘制功能、资源文件、动画效果和第三方组件库,我们可以很容易地美化进度条,提升应用程序的外观,使其更具个性化和吸引力。 ### 回答2: Delphi是一种以Object Pascal为基础的可视化编程环境,它允许开发者创建Windows应用程序和GUI界面。在Delphi中,进度条是一种常用的控件,用于显示任务的完成进度。 为了美化Delphi的进度条,可以使用各种方法和技巧。 一种常见的美化方法是改变进度条的外观。可以自定义进度条的颜色和样式,以使其与应用程序的整体外观和风格保持一致。Delphi提供了属性和事件来实现这一目的。通过修改进度条的背景色、前景色和边框样式,可以根据需求设计独特的进度条外观。 另外,还可以在进度条中添加文本或图标,以显示更具体的信息。通过在进度条上绘制文本或添加图标,可以使用户更直观地了解任务的进度,增强用户体验。 另一个美化进度条的方法是添加动画效果。通过使用动画库,如GIF动画或逐帧动画,可以为进度条添加各种动态效果,如闪烁、渐变等。这些动画效果可以吸引用户的注意力,让用户更加关注任务的进度。 此外,还可以通过添加过渡效果来美化进度条。过渡效果可以使进度条的显示更加平滑和流畅,给用户一种更自然的感觉。例如,在进度条更新时添加渐变效果,可以使进度条的变化更加平滑,增强用户的视觉体验。 总之,通过合理利用Delphi提供的功能和技巧,我们可以美化进度条,使其更符合应用程序的整体风格和用户体验的需求。无论是改变进度条的外观、添加文本和图标、添加动画效果或过渡效果,都可以为Delphi应用程序带来更好的用户体验。 ### 回答3: Delphi是一种用于开发Windows桌面应用程序的集成开发环境(IDE)。在Delphi中,我们可以使用TProgressBar组件来创建和管理进度条。然而,基本的进度条可能显得有些单调和无趣。因此,我们可以通过美化进度条来增强用户体验。 一种常见的美化方法是修改进度条的外观。我们可以使用Delphi中提供的颜色、样式和字体等属性,将进度条改为更符合应用程序主题和风格的外观。例如,我们可以改变进度条的背景色和前景色,使其更加醒目和吸引人。另外,我们还可以选择合适的字体,并使用字体颜色属性来提高进度条的可读性。 此外,我们还可以添加动画效果来使进度条更加生动。通过在进度条上添加一些动态效果,比如渐变效果、闪烁效果或者流动效果,可以更好地吸引用户的注意力。这些动画效果可以通过修改进度条的显示方式、使用计时器来控制进度条的刷新率,并结合一些过渡效果来实现。 另一个可行的方法是使用图像来替代标准的进度条外观。我们可以将自定义的图像作为进度条的背景或前景,并使用图片或图标代替标准的进度条提示。这样一来,用户会感到更亲切和有趣,同时也能更好地体现应用程序的风格和主题。 总之,通过修改属性、添加动画效果或使用图像,我们可以美化Delphi中的进度条,提高应用程序的用户体验和视觉吸引力。这些方法都需要根据具体的应用程序需求和设计目标来选择,并与其他界面元素相协调,以确保整体一致性和流畅性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值