jquery+css实现炫酷进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:jquery+css实现炫酷进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url(http://fonts.useso.com/css?family=Roboto:100italic,100,300italic,300,700italic,700); .progress { font-size: 1.2em; height: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.2); } .progress--active .progress__bar { opacity: 1; } .progress__text { width: 20em; padding: 0 0.9em; position: absolute; } .progress__text em { font-style: normal; } .progress__bar { color: white; font-size: 12px; font-weight: normal; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); line-height: 19px; display: block; position: relative; top: -1px; left: -1px; width: 0%; height: 100%; opacity: 0; border: 1px solid; border-radius: 2px 0 0 2px; background-size: 100px 30px, 130px 30px, 130px 30px; background-position: -20% center, right center, left center; background-repeat: no-repeat, no-repeat, no-repeat; -webkit-transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease; transition: opacity 0.2s ease, width 0.8s ease-out, background-color 1s ease, border-color 0.3s ease, box-shadow 1s ease; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0