首页 > 代码库 > CSS3动画进度条
CSS3动画进度条
CSS3动画进度条
<style></style>CSS CODE:
@-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px 30px; } } @-moz-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px 30px; } } @-ms-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px 30px; } } @keyframes move{ 0%{ background-position: 0 0; } 100%{ background-position: 30px 30px; } } .progress{ width: 300px; height: 25px; background-color:rgba(1,190,1,1) ; box-shadow: 0px 2px 0px rgba(255,255,255,0.5) inset; border-radius: 5px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)), color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); background-image: linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); -webkit-animation:move 1s linear infinite; -moz-animation:move 1s linear infinite; -ms-animation:move 1s linear infinite; -o-animation:move 1s linear infinite; animation:move 1s linear infinite; }
HTML CODE:
<div class="progress"></div>
这里两个关键：
background-size background-image
中间白色条的大小可以通过background-size控制，颜色通过background-image rgba控制
CSS3动画进度条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。