带炫酷发光CSS3 SVG进度条动画

分享一款CSS3 SVG动画进度条应用，进度条在进度加载中将会出现闪闪发光的炫酷特效，遗憾的是，需要高版本的HTML5浏览器才能支持发光动画。.loading-container { width: 600px; height: 300px; padding: 50px; margin: 0px auto; border-radius: 10px; background: rgba(255,255,255,0.6); border: 1px solid #eee;}.loading-container .loading-bar { margin-bottom: 40px;}.loading-bar { width: 500px; margin: 0px auto; height: 61px; border-radius: 5px; background-color: #282f32; padding: 4px 5px; box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);}.amount { /* we haven't included the colour yet, we'll get to that later. */ height: 60px; border-radius: 5px; white-space: nowrap; overflow: hidden; margin-top: -9px;}.lines { /* the lines overflow the container. This s a continuous flow of the background */ width: 200%; /* We use a SVG file as the background */ background: url('lines.svg') repeat-x; height: 120%; text-align: center; margin-top: -35px; /* Any overflow is hidden */ overflow: hidden; border-radius: 50px; /* Implement the animations, we'll get to that later */ -webkit-animation: moveBars 1s linear infinite; -moz-animation: moveBars 1s linear infinite; -ms-animation: moveBars 1s linear infinite; -o-animation: moveBars 1s linear infinite; animation: moveBars 1s linear infinite; font-weight: bold; color: #fff; color: 1px; font-size: 18px; text-shadow: 0px 0px 10px rgba(0,0,0,0.3);}.loaded { text-align: center; font-family: Helvetica, sans-serif; font-weight: bold; position: relative; top: 9px; font-size: 30px; text-shadow: 0px 0px 10px rgba(0,0,0,0.2); color: #fff; z-index: 9999;}.green { background-color: #8ac320; box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;}.blue { background-color: #20b9c3; box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;}.red { background-color: #dc6565; box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;}/* ANIMATIONS */@keyframes moveBars { 100% { margin-left: -180px; } }@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }@-moz-keyframes moveBars { 100% { margin-left: -180px; } }@-ms-keyframes moveBars { 100% { margin-left: -180px; } }@-o-keyframes moveBars { 100% { margin-left: -180px; } }/* ------- IGNORE */#header { width: 100%; margin: 0px auto;}#header #center { text-align: center;}#header h1 span { color: #000; display: block; font-size: 50px;}#header p { font-family: 'Georgia', serif;}#header h1 { color: #892dbf; font: bold 40px 'Bree Serif', serif;}#travel { padding: 10px; background: rgba(0,0,0,0.6); border-bottom: 2px solid rgba(0,0,0,0.2); font-variant: normal; margin-bottom: 40px; text-decoration: none;}#travel a { font-family: 'Georgia', serif; text-decoration: none; border-bottom: 1px solid #f9f9f9; color: #f9f9f9;}

在线演示        积分下载        6毛下载        砍两刀下载