CSS图像绘制之：条纹背景（转）

<!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

CSS图像绘制之：条纹背景（转）

推荐阅读