css实现一个彩色渐变动画进度条效果代码
代码语言:html
所属分类:进度条
代码描述: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> body { font-family:'Montserrat',sans-serif; background:#2c303a; } .container { margin:100px auto; width:500px; text-align:center; } .progress { padding:6px; background:rgba(0,0,0,0.25); border-radius:6px; box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08); } .progress-bar { height:18px; background-color:#ee303c; border-radius:4px; transition:0.4s linear; transition-property:width,background-color; } .progress-striped .progress-bar { background-color:#FCBC51; width:100%; background-image:linear-gradient(45deg,#fca311 25%,transparent 25%,transparent 50%,#fca311 50%,#fca311 75%,transparent 75%,transparent); animation:progressAnimationStrike 6s; } @keyframes progressAnimationStrike { from { width:0; } to { width:100%; } }.progress2 { padding:6px; border-radius:30px; background:rgba(0,0,0,0.25); box-shadow:inset 0 1px 2px rgba(0,0,0,0.25),0 1px rgba(255,255,255,0.08); } .progress-bar2 { height:18px; border-radius:30px; background-image:linear-gradient(to bottom,rgba(255,255,255,0.3),rgba(255,255,255,0.05)); transition:0.4s linear; transition-property:width,background-color; } .progress-moved .progress-bar2 { width:85%; background-color:#EF476F; animation:progressAnimation 6s; } @keyframes progressAnimation { 0% { width:5%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0