<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>漂亮的CSS3动画进度条DEMO演示</title><style> html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style><style> @import url(http://fonts.googleapis.com/css?family=Open+Sans:300); *, *:before, *:after {box-sizing: border-box; }body {font-size: 100%;font-family: "Open sans", Arial, sans-serif;color: white; }.container {margin: 3rem auto;max-width: 600px; } @media(max-width: 610px) {.container {padding: 0 5%;} } .bar {height: 40px;width: 0;transition: width 1.2s ease-in-out;position: relative;margin: 0.5rem 0;border-radius: 4px; } @media(max-width: 350px) {.bar {margin: 2.5rem 0 0.5rem;} } .bar.sanjiao{background:#58a;background-image:linear-gradient(45deg,#fff 25%, transparent 25%),linear-gradient(-45deg,#fff 25%, transparent 25%);background-size: 30px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #0d7e68; } .bar.mint {background-color: #14c3a2;background-image: repeating-linear-gradient(-45deg, #14c3a2, #14c3a2 30px, #22e8c3 30px, #22e8c3 60px);background-size: 600px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #0d7e68; } .bar.red {background-color: #cf4647;background-image: repeating-linear-gradient(-45deg, #cf4647, #cf4647 30px, #da6e6f 30px, #da6e6f 60px);background-size: 600px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #9f292a; } .bar.orange {background-color: #eb7b59;background-image: repeating-linear-gradient(-45deg, #eb7b59, #eb7b59 30px, #f09f87 30px, #f09f87 60px);background-size: 600px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #dd481b; } .bar.lila {background-color: #524656;background-image: repeating-linear-gradient(-45deg, #524656, #524656 30px, #6d5d72 30px, #6d5d72 60px);background-size: 600px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #2a242c; } .bar.gray {background-color: #595b5a;background-image: repeating-linear-gradient(-45deg, #595b5a, #595b5a 30px, #727574 30px, #727574 60px);background-size: 600px 100%;animation: barberpole 12s linear infinite;border-bottom: 0.2rem solid #333434; } .bar.active:after, .bar.active:before {opacity: 1; } .bar:before {content: attr(data-skill);display: block;position: absolute;top: 0;left: 0;padding: 10px;height: 40px;font-style: italic;opacity: 0;transition: opacity 2s 0.6s; } @media(max-width: 350px) {.bar:before {top: -100%;color: black;padding: 10px 0 0;} } .bar:after {content: attr(data-percent) "%";display: block;position: absolute;top: 0;right: 0;height: 40px;padding: 10px;opacity: 0;transition: opacity 2s 0.6s; } @media(max-width: 350px) {.bar:after {left: 0;} } @keyframes barberpole {from {background-position: 0% 0%;}to {background-position: 600px 0%;} } .bar.active[data-percent="5"] {width: 5%; }.bar.active[data-percent="10"] {width: 10%; }.bar.active[data-percent="15"] {width: 15%; }.bar.active[data-percent="20"] {width: 20%; }.bar.active[data-percent="25"] {width: 25%; }.bar.active[data-percent="30"] {width: 30%; }.bar.active[data-percent="35"] {width: 35%; }.bar.active[data-percent="40"] {width: 40%; }.bar.active[data-percent="45"] {width: 45%; }.bar.active[data-percent="50"] {width: 50%; }.bar.active[data-percent="55"] {width: 55%; }.bar.active[data-percent="60"] {width: 60%; }.bar.active[data-percent="65"] {width: 65%; }.bar.active[data-percent="70"] {width: 70%; }.bar.active[data-percent="75"] {width: 75%; }.bar.active[data-percent="80"] {width: 80%; }.bar.active[data-percent="85"] {width: 85%; }.bar.active[data-percent="90"] {width: 90%; }.bar.active[data-percent="95"] {width: 95%; }.bar.active[data-percent="100"] {width: 100%; }</style><script src="js/prefixfree.min.js"></script></head><body><div class='container'><div class='bar mint' data-percent='100' data-skill='HTML5'></div><div class='bar red' data-percent='85' data-skill='CSS3'></div><div class='bar lila' data-percent='75' data-skill='jQuery'></div><div class='bar orange' data-percent='65' data-skill='PHP'></div><div class='bar gray' data-percent='55' data-skill='MySQL'></div><div class='bar sanjiao' data-percent='100' data-skill='MySQL'></div> </div> <div style="text-align:center;clear:both"> <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script> <script src="/follow.js" type="text/javascript"></script> </div><script src='js/jquery.js'></script><script src="js/index.js"></script></body></html>
CSS
body {
background:linear-gradient(#51B0E7 50%, #006084 50%);
background-size:100% 20px;
}
CSS
body {
background:#FFF;
margin:50px;
background:linear-gradient(45deg, #3498DB 50%, #2980B9 50%);
background-size:30px 30px;
}
CSS
方法一：实际线条宽度15/1.414
body {
background:#FFF;
margin:50px;
background:
/*#2980B9 0中0表示此之前最大数，即#2980B9 25%*/
/*此处设置0，为了减少重复性，方便维护*/
linear-gradient(45deg, #3498DB 25%, #2980B9 0,#2980B9 50%,#3498DB 0%,#3498DB 75%,#2980B9 0);
background-size:30px 30px;
}
方法二：
！必须指定width、height，用于repeating-linear-gradient填充
div {
width:600px;
height:600px;
background:
/*让repeating-linear-gradient自动填充div，
可以任意修改角度，直接指定线条宽度15px*/
repeating-linear-gradient(45deg, #3498DB, #3498DB 15px, #2980B9 0,#2980B9 30px);
}
方法三：（用于同一颜色，只有明度有差异）
body {
width: 600px;
height: 600px;
background:#45aad7;
/*背景图上直接叠加一层半透明白色条纹*/
background-image:repeating-linear-gradient(45deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1)15px,transparent 0,transparent 30px);
}
CSS
body {
background:#FFF;
background-image:linear-gradient(0deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(90deg,rgba(200,0,0,.5) 50%, transparent 50%) ;
background-size:30px 30px;
}
CSS
body {
background:#58a;
background-image:linear-gradient(0deg,white 1px, transparent 0),
linear-gradient(90deg,white 1px, transparent 0);
background-size:30px 30px;
}
CSS
body {
background:#58a;
background-image:
linear-gradient(0deg,hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(90deg,hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(0deg,white 2px, transparent 0),
linear-gradient(90deg,white 2px, transparent 0);
background-size:15px 15px,15px 15px,75px 75px,75px 75px;
}
CSS
body {
background:#58a;
background-image:
linear-gradient(45deg,#fff 25%, transparent 25%),
linear-gradient(-45deg,#fff 25%, transparent 25%);
background-size:30px 30px;
}
CSS
body {
background:#58a;
background-image:radial-gradient(#fff 20%, transparent 0),
background-size:60px 60px;
}
CSS
body {
background:#58a;
background-image:
radial-gradient(#fff 20%, transparent 0),
radial-gradient(#fff 20%, transparent 0);
background-size:60px 60px;
background-position: 0 0 ,30px 30px;
}
CSS
body {
background:#58a;
background-image:
/*下三角向下移动至下一个三角，向下形成正方形*/
linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0),
linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),
/*上三角下形成上正方形*/
linear-gradient(45deg,transparent 75%, hsla(0,0%,100%,.3) 0),
linear-gradient(45deg,hsla(0,0%,100%,.3) 25%, transparent 0);
background-size: 30px 30px;
background-position: 0 0,15px 15px;
}
- 顶
- 0
- 踩
- 0
