字号: - o +

用div标签设置css3 logo

2013-03-04 前端开发 0人评论 19,752次浏览   

子曰:把希望建筑在意欲和心愿上面的人们,二十次中有十九次都会失望 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

想法:用单独的标签显示CSS3

<div id="css3icon"></div>

需要的CSS样式:

body {
 width:100%;
 padding-top:1em;
 font-size:3em;
 text-align:center;
}
body > * { position:relative; left:-2.4em; }

#css3icon {
	outline:solid 1px transparent;
	display:inline-block;
	position:relative;
	height:0.8em; width:0.8em;
	background:transparent;
	color:transparent;
	line-height:0.8em;
	overflow:visible;
	box-shadow:
		0.8em  0 0 #38c,
		1.4em  0 0 #38c,
		2em 0 0 #38c,
		2.6em 0 0 #38c,
		3.2em 0 0 #38c,
		3.6em 0 0 #38c,
		4em 0 0 #38c,
		4em 0.65em 0 #38c,
		0.8em 1.3em 0 #38c,
		1.4em 1.3em 0 #38c,
		2em 1.3em 0 #38c,
		2.6em 1.3em 0 #38c,
		3.2em 1.3em 0 #38c,
		3.6em 1.3em 0 #38c,
		4em 1.3em 0 #38c,
		4em 1.9em 0 #38c,
		0.8em 2.6em 0 #38c,
		4em 2.6em 0 #38c;
	transform: skewX(-12deg);
	-webkit-transform: skewX(-12deg);
	-ms-transform: skewX(-12deg);	
}
#css3icon:before {
	position:absolute;
	content:''; 
	display:block;
	height:0.8em; width:2em;
	margin:3.4em 0 0 0.8em;
	background:#38c;
	transform: skew(-1deg,18.4deg);	
	transform-origin: 100% 100%;
	-webkit-transform: skew(-1deg,18.4deg);	
	-webkit-transform-origin: 100% 100%;
	-ms-transform: skew(-1deg,18.4deg);	
	-ms-transform-origin: 100% 100%;
	border-right:solid 1px #38c;
}
#css3icon:after {
	position:absolute;
	content:''; 
	display:block;
	height:0.8em; width:2em;
	margin:3.4em 0 0 2.8em;
	background:#38c;
	transform: skew(1deg,-18.4deg);	
	transform-origin: 0% 100%;
	-webkit-transform: skew(1deg,-18.4deg);	
	-webkit-transform-origin: 0 100%;
	-ms-transform: skew(1deg,-18.4deg);	
	-ms-transform-origin: 0 100%;
}

最终的效果如下图:

css3logo

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

发表我的评论

*

*

取消