多彩进度条效果
代码语言:html
所属分类:进度条
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> @import url(http://fonts.googleapis.com/css?family=Expletus+Sans); /* Basic resets */ * { margin:0; padding:0; box-sizing: border-box; } body { margin: 50px auto 0; max-width: 800px; font-family: "Expletus Sans", sans-serif; } li { width: 50%; float: left; list-style-type: none; padding-right: 5.3333333%; } li:nth-child(even) { margin-bottom: 5em;} h2 { margin: 0 0 1.5em; border-bottom: 1px solid #ccc; padding: 0 0 .25em; } /* Styling an indeterminate progress bar */ progress:not(value) { /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */ } /* Styling the determinate progress element */ progress[value] { /* Get rid of the default appearance */ appearance: none; /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */ border: none; /* Add dimensions */ width: 100%; height: 20px; /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */ background-color: whiteSmoke; border-radius: 3px; box-shadow: 0 2px 3px rgba(0,0,0,.5) inset; /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */ color: royalblue; position: relative; margin: 0 0 1.5em; } /* Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element. -webkit-progress-bar -> To style the progress element container -webkit-progress-value -> To style the progress element value. */ progress[value]::-web.........完整代码请登录后点击上方下载按钮下载查看
网友评论0