日志分类 > 前端开发

使用css3制作带高亮条纹的简单按钮

发布时间：2013-11-29 发布：cenbel_luoshushi 分类：前端开发

使用css3的渐变特性制作带渐变效果的button，明河曾整理成一个合集，有兴趣的朋友可以看《css按钮效果及其教程合集》，今天这个教程在渐变的基础再增强下效果：白色的斜纹效果（斜纹效果貌似韩国的网站应用特别多），不使用图片哦。

1.原理说明

要使用css实现斜纹效果，需要解决几个问题：

1、如何使用css向按钮内部添加内容？

伪类:before或:after结合content属性，可以在容器之前或之后插入内容。现在问题出现了，显然如果只是插入文本，还是无法出现斜纹的效果，我们还需要一些特殊处理。

	
			.fx-stripes:before {

			                    content: "|||||||||||||||";

			}

上述代码，在样式名为fx-stripes容器之前插入 “|||||||||||||||”，接下来我们来看如何让“|”倾斜掉。

2、使用transform的skewX倾斜“|”

想要实现倾斜的效果，第一个想到的应该是css3的transform，transform中有个skewX属性，可以实现容器沿 X 轴进行扭曲变换，我们把”|”倾斜30度，不就出现斜纹效果了？

	
			.fx-stripes:before {

			                    content: "|||||||||||||||";

			                    -moz-transform: skewX(-30deg);

			                    -webkit-transform: skewX(-30deg);

			                    -o-transform: skewX(-30deg);

			}

2.完整斜纹代码

	
			.fx-stripes:before {

			                    content: "|||||||||||||||";

			                    position: absolute;

			                    top: -50px;

			                    left: -50px;

			                    z-index: 1;

			                    line-height: 1;

			                    font-weight: bold; /* Parametres for stripes */

			                    color: #fff;

			                    font-size: 100px;

			                    letter-spacing: -40px;

			                    opacity: 0.1;

			                    -moz-transform: skewX(-30deg);

			                    -webkit-transform: skewX(-30deg);

			                    -o-transform: skewX(-30deg);

			                }

查看 [2308] 评论 [0]

<<上一条：九月生日会__离别篇

>>下一条：jquery+canvas实现html5幻灯...

相关标签： 网页设计界面

文章评论

暂无数据！

我来说两句

昵称：

评论：

日志分类