如何做进度条动画?
问题描述:
我有一个客户端,给我看,有一些多级进度条像这样一个在这里另一个站点:kitepharma.com/pipeline/如何做进度条动画?
我有一个页面设置,并能够从CSS样式,但我建立了吧不能为我的生活得到动画工作。
我试图应用一些其他的CSS3动画,但我似乎无法让它工作。
任何人都可以提供任何见解我做错了什么?我没有看到任何其他原始结构的代码,除非它在Chrome检查器找不到的文件中。
下面是我用我的CSS样式:
.section {
display: block;
}
.pipe02 {
background: #CCC;
position: relative;
}
.ready {
-webkit-transition : width 2s ease;
-moz-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: initial;
transition-timing-function: ease;
height: 50px;
line-height: 50px;
background: rgb(47,96,173);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…IgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: -moz-linear-gradient(-45deg, rgba(47,96,173,1) 0%, rgba(125,185,232,1) 50%, rgba(125,185,232,1) 100%);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(47,96,173,1)), color-stop(50%,rgba(125,185,232,1)), color-stop(100%,rgba(125,185,232,1)));
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: -webkit-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: -o-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: -ms-linear-gradient(-45deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
background: linear-gradient(135deg, rgba(47,96,173,1) 0%,rgba(125,185,232,1) 50%,rgba(125,185,232,1) 100%);
background-image: linear-gradient(135deg, rgb(47, 96, 173) 0%, rgb(125, 185, 232) 50%, rgb(125, 185, 232) 100%);
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: initial;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2f60ad', endColorstr='#7db9e8',GradientType=1);
}
@-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: -100px 0px, 0 0, 0 0}
}
ul.pipelabel {
position: absolute;
width: 100%;
left: 0;
}
ul.pipelabel li:nth-child(-n+2) {
border-right: solid 1px #FFF;
}
ul.pipelabel li {
float: left;
width: 33%;
padding: 0;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0 auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: center;
list-style-type: none;
color: #fff;
}
代码栏:
<section class="avia_codeblock_section avia_code_block_0">
<div class="nectar-progress-bar">
<div class="pipe02">
<div style="width: 40%;" class="ready bar-wrap">
<ul class="pipelabel">
<li>Discovery</li>
<li>Pre Test</li>
<li>PHASE 1</li>
</ul>
</div>
</div>
</div>
</section>
谢谢你给任何人,可以给我任何建议。
答
您可以使用此代码实现该动画。这可能不是做动画的干净的方式,但是这肯定工程
<html>
<head></head>
<style>
.container{
position: absolute;
top: 0;
width: 400px;
height: 80px;
background:linear-gradient(95deg, rgba(47,96,173,1) 0%, rgba(125,185,232,1) 25%, rgba(125,185,232,1) 100%);
-webkit-animation :move 5s forwards;
}
@-webkit-keyframes move{
0%{ width: 400px; }
100%{width: 700px;
}
}
.two{
width: 400px;
height: 80px;
margin-left: 400px;
position: absolute;
top: 0;
background-color: #c0c0c0;
-webkit-animation :moveTwo 5s forwards;
}
@-webkit-keyframes moveTwo{
0%{ margin-left: 400px;
width: 400px; }
100%{ margin-left: 700px;
width: 100px;
}
}
</style>
<body>
<div class="container">
</div>
<div class="two"></div>
</body>
有了这个答案,我不能把文本内容上栏的顶部像我在的例子。我能够得到一个动画工作,但它不像滚动事件那样处理滚动事件。我仍然在寻找能帮助我解决这个问题的答案。感谢您帮助我取得一些进展的时间。 –
你将不得不使用在滚动动画来获取滚动的东西 –