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: width1.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, #52465630px, #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, #72757460px);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 2s0.6s;
}
@media(max-width: 350px) {.bar:before {top:-100%;color: black;padding: 10px0 0;}
}
.bar:after {content: attr(data-percent) "%";display: block;position: absolute;top:0;right:0;height: 40px;padding: 10px;opacity:0;transition: opacity 2s0.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图像绘制之：条纹背景（转）相关推荐

html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...
html5横竖条纹背景,CSS制作Web页面条纹背景样式的介绍
这篇文章主要介绍了关于CSS制作Web页面条纹背景样式的介绍,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果 ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...
html中背景条纹效果,CSS揭秘之《条纹背景》
先来说说渐变吧 background: linear-gradient(#fb3 20%, #58a 80%); 效果图如下所示:也就是说真正的渐变只出现在容器 60%(从20%到80%) 的高度区域 ...
html中背景条纹效果,使用CSS线性渐变制作条纹背景
主要使用的属性 linear-gradient background:linear-gradient(#000,#ccc); Paste_Image.png 取消中间的渐变过度 background: ...
css：实现斑马条纹背景
效果代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
html中背景条纹效果,纯css3实现条纹背景方法（水平，垂直，倾斜）
以上这些并不是背景图,而是由CSS样式代码实现.在现代标准浏览器中,我们通过CSS3的两个属性,一个是linear-gradient,即线性渐变,另一个是background-size,用来确定渐变的 ...
CSS 条纹背景秘探
CSS 条纹背景秘探 CSS 条纹背景秘探 CSS 线性渐变 background-size 实现条纹垂直条纹斜向条纹 CSS 条纹背景秘探要想在网页中实现条纹图案,通常,我们的方法是创建一个 ...
CSS:条纹背景的实现
CSDN话题挑战赛第2期参赛话题:学习笔记学习之路,长路漫漫,写学习笔记的过程就是把知识讲给自己听的过程.这个过程中,我们去记录思考的过程,便于日后复习,梳理自己的思路.学习之乐,独乐乐,不如众乐 ...

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

CSS图像绘制之：条纹背景（转）相关推荐

最新文章

热门文章