<!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
转载于:https://www.cnblogs.com/shadow-wolf/p/6868353.html
总结
以上是生活随笔为你收集整理的CSS图像绘制之：条纹背景（转）的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
