静海县建设局网站,网站效果图尺寸,系统优化的方法哲学,网站赚取广告费最近需要写一个进度条的效果#xff0c;网上找了一些#xff0c;但都不能完美的实现需求。于是就自己改造了一个#xff0c;效果如下图#xff1a;因为动态图太大#xff0c;我上传到 GitHub 了#xff0c;就不在博客上再上传了。百分比跟随进度条移动#xff0c;百分比…最近需要写一个进度条的效果网上找了一些但都不能完美的实现需求。于是就自己改造了一个效果如下图因为动态图太大我上传到 GitHub 了就不在博客上再上传了。百分比跟随进度条移动百分比数字也随之变化。进度条动画效果可选颜色可根据自己的需求修改。代码如下html0%JS需要引jQueryvar a 0,timer setInterval(function () {a //10-11秒 a101-2秒$(.progress-value).html(a %);$(.progress-bar).width(a %);if (a 80) {clearInterval(timer);//清除定时器$(.progress-bar).removeClass(active);location.href #;//跳转链接}}, 100);CSS.progress {height: 20px;background-color: #f5f5f5;-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);overflow: visible;border-radius: 20px;margin: 80px 20px;}.progress .progress-bar {position: relative;float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #fff;text-align: center;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);-webkit-transition: width .6s ease;-o-transition: width .6s ease;transition: width .6s ease;border-radius: 20px;background-color: #001ff8;}.progress .progress-value {box-sizing: border-box;background-clip: content-box;display: block;height: 42px;line-height: 38px;width: 42px;text-align: center;border-radius: 50%;font-size: 13px;color: #fff;padding: 2px;background-color: #214eff;border: 1px solid #214eff;position: absolute;top: -60px;right: -15px;}.progress .progress-value:after {content: ;border-top: 10px solid #214eff;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;bottom: -12px;left: 12px;}/*动画效果*/-webkit-keyframes progress-bar-stripes {from {background-position: 35px 0;}to {background-position: 0 0;}}keyframes progress-bar-stripes {from {background-position: 35px 0;}to {background-position: 0 0;}}/*背景效果*/.progress-bar-striped, .progress-striped .progress-bar {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);-webkit-background-size: 35px 35px;background-size: 35px 35px;}.progress-bar.active, .progress.active .progress-bar {-webkit-animation: progress-bar-stripes 2s linear infinite;-o-animation: progress-bar-stripes 2s linear infinite;animation: progress-bar-stripes 2s linear infinite;animation-duration: 2s;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;animation-direction: normal;animation-fill-mode: none;animation-play-state: running;animation-name: progress-bar-stripes;}我将完整的页面上传到我的 GitHub 上面了有需要的可以去下载点击访问
