<!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图像绘制之：条纹背景（转）的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
