<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var i;
function go()
{
bar_width = document.getElementById("bg").clientWidth;
i = bar_width;
setTimeout('start();',300);
}
function start()
{
if(i-->0)
{
ps.style.width = i;
bn.innerHTML = Math.floor((bar_width-i)/bar_width*100)+"%";
setTimeout('start();',20);
}
}
</script>
<style type="text/css">
#bg {
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
width:300px;
height:20px;
border:1px solid black;
z-index:0;
position:absolute;
}
#ps {
float:right;
background-color:#FFFF00;
width:100%;
}
#bn {
position:absolute;
text-align:center;
width:100%;
height:100%;
cursor:default;
}
</style>
</head>
<body onload="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>
<html>
<head>
<title>渐变效果进度条</title>
<script language="javascript">
var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
"0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
"1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
"2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
"3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
"4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
"5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
"6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
"7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
"8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
"9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
"AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
"BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
"CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
"DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
"EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
"FA","FB","FC","FD","FE","FF");
function go()
{
setTimeout('start();',100);
}
var i=0;
function start()
{
if(i++<256)
{
ps.innerHTML += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
bn.innerHTML = Math.floor(i/2.56)+"%";
setTimeout('start();',10);
}
}
</script>
<style type="text/css">
#ps {
background-color:#FFFF00;
width:256px;
margin: 1px;
float:left;
}
#bn {
width:39px;
margin: 1px;
float:right;
text-align:center;
color:#FFFFFF;
font-family:Arial;
font-size:13px;
}
</style>
</head>
<body onload="go();">
<div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
</body>
</html>
分享到：
相关推荐
在这个名为"HTML5带渐变的进度条特效.rar"的压缩包中，包含了一个使用这两种技术实现的进度条特效，适用于展示网页加载或其他过程的进度。 首先，HTML5引入了`<progress>`元素，用于创建一个可定制的进度条。这个...
在名为“GradProgCtrl”的压缩包中，很可能包含了实现颜色渐变进度条的相关代码、资源文件和示例。开发者可以研究这些文件，学习如何在自己的项目中集成和自定义这种功能。这可能包括CSS样式文件、JavaScript代码...
在了解和掌握了上述两种进度条实现方法后，我们可以根据实际需求选择适合的样式来实现进度条，或者根据这两种基础样式进行进一步的扩展和优化，创造出更多符合项目需求的进度条效果。通过CSS3提供的强大功能，我们...
本篇文章将详细探讨如何利用这两种技术实现各种样式的进度条。 首先，HTML是网页的基础结构语言，用于构建网页的基本框架。在实现进度条时，我们通常会使用`<progress>`标签，这是一个内建的HTML5元素，专门用于...
本文将深入探讨JavaScript如何实现这两种效果。 首先，我们来理解颜色梯度（Gradient）。颜色梯度是从一种颜色平滑过渡到另一种或多种颜色的效果。在CSS中，我们可以使用`linear-gradient()`或`radial-gradient()`...
CSS3支持两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。在这个特效中，我们将主要使用线性渐变来创建颜色过渡的效果。 线性渐变的基本语法如下： ```css background: linear-...
【标题】"纯css3实现的百分比渐变进度条加载动画特效源码"是一个以CSS3技术为核心的项目，旨在创建一种动态的、具有渐变效果的进度条加载动画。在网页开发中，这种效果常用于展示数据加载、任务完成度或者用户交互...
在网页设计中，动态进度条是一种常见的用户界面元素，它能提供给用户视觉反馈，展示某个过程的进度，如文件上传、数据加载等。本文将详细介绍如何使用CSS和JavaScript来实现这种动态效果，并通过示例页面进行演示。 ...
6. **过渡（Transitions）**：CSS3的`transition`属性允许元素在两种状态之间平滑过渡，比如进度条的宽度变化可以添加平滑的动画效果。 在这个压缩包中，可能包含了一个HTML文件、一个CSS文件，以及可能的...
在这个“HTML5 CSS3 进度条实现实例源码完美版”中，我们可以深入学习如何利用这两种技术来实现动态、美观的进度条效果。 HTML5引入了许多新元素和API，其中之一就是`<progress>`元素，用于表示一个任务的进度。这...
在网页设计中，进度条是一种常见的视觉元素，用于表示任务或数据加载的进度。当涉及到环状圆形进度条时，这种设计通常更具吸引力且能够直观地展示百分比完成度。CSS（Cascading Style Sheets）作为网页样式控制的...
在本压缩包"HTML5加CSS3实现可渐变颜色的扇形进度条动画特效.zip"中，我们将探讨如何利用这两种技术来创建一个动态的、颜色渐变的扇形进度条。 首先，HTML5的`<canvas>`元素是实现动画的基础。`<canvas>`提供了一个...
在IT界，用户界面设计是至关重要的一环，...开发者可以通过熟练运用前端技术，结合CSS3动画和JavaScript，来实现这种独特的进度条效果。对于希望提升产品用户体验的设计师和开发者来说，这是一个值得研究和实践的领域。
【HTML+CSS实现的PK进度条】是一种常见的前端交互元素，常用于展示两个竞争者或团队的竞争进度，如游戏对战、数据比较等场景。在这个案例中，我们可以通过HTML结构和CSS样式来创建一个动态的、可视化的效果，使得...
在本案例中，我们关注的是一个使用纯CSS3实现的渐变进度条动画特效。这个特效利用了CSS3的背景属性和动画特性，为网页界面增添了动态视觉效果，提升了用户体验。 首先，我们要理解"渐变效果"在CSS3中的实现。CSS3...
随着CSS3技术的发展，我们可以利用其强大的样式控制能力来创建出各种炫酷的进度条动画，其中背景颜色渐变的效果尤其引人注目。本篇文章将深入探讨如何利用CSS3实现这样的效果。 首先，我们要明白CSS3中的渐变概念。...
1. **渐变（Gradients）**：CSS3提供了线性渐变（linear-gradient）和径向渐变（radial-gradient）两种方式。线性渐变允许我们定义颜色从一个方向到另一个方向的变化，而径向渐变则从一个点向外扩散。在iOS7进度条中...
- 许多进度条示例可能包含动画效果，如平滑过渡、渐变填充、脉冲效果等。这些效果可以通过CSS3的`transition`和`animation`属性实现。 5. **自定义设计**： - 进度条的设计可以是线性的，也可以是环形的，甚至...
此外，自定义CSS和JavaScript也可以帮助实现独特的设计效果，如渐变颜色、动态阴影或者3D效果。 最后，压缩包中的"进度条"文件名列表可能包含了一系列不同样式和效果的进度条资源。开发者可以根据自己的需求，选择...
【纯CSS3渐变进度条动画特效】是一种利用CSS3的高级特性来创建动态效果的网页设计技术。在本文中，我们将深入探讨如何利用CSS3的背景属性和动画功能来实现这种独特的视觉效果。 首先，我们要理解CSS3渐变的概念。在...