纯CSS3实现支持自定义设定的图标

简介:

网上有各种用CSS3画图标,画漫画的代码,实在是有点吊!如果能为自己的网站也绘制一套CSS3图标,那么就省去了用小图片的力气。虽然说各大浏览器对CSS3的支持性还不尽相同,但是大势所趋,写写更健康。

首先,我们要做到使用简单,简单到给元素加个类就能使用图标,然后我们还要支持可定制,比如颜色,大小。看下面的代码:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS3 ICONS</title>
	</head>
	<body>
		<div class="container">
			<a class="css3-icon css3-icon-search" href="#"></a>
		</div>
	</body>
</html>
我们只要给a标签加上两个类就可以让它变成一个图标。之所以加两个,是因为类css3-icon实现的图标的基本样式,而css3-icon-search则实现了具体的search图标样式:

/*global icon style*/
.css3-icon{
	position:relative;
	display:block;
	/*custom the icon size*/
	width:100px;height:100px;font-size:10px;
	background:#ccc;
}
.css3-icon:before,.css3-icon:after{content:"";position:absolute;left:0;background:transparent;font-size:1em;}


 伪元素肯定是要用上的,而且要相对于.css3-icon绝对定位。我们希望图标的大小是可以自定义的,所以在:before和:after伪元素里我们使用了相对单位em,为此要在.css3-icon中对font-size重新赋初始值。 

接下来我们画一个search图标:

/*---------------------
search icon
----------------------*/
.css3-icon-search:after {
		left:55%;top:70%;
    width:40%;height:12%;
		background:#456;
		transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);
}
.css3-icon-search:before {
		left:10%;top:5%;
    width:50%;height:50%;
    border:.9em solid #456;
    border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;
}
.css3-icon-search:hover:before{
	border-color:#ff7;
}
.css3-icon-search:hover:after{
	background:#ff7;
}
在before伪元素中,利用border-radiuis画一个圆,在after伪元素中,利用transform画出放大镜的手柄。为了支持图标缩放,这里都使用了百分比,效果如下:



要修改大小的话只要改变.css3-icon中的width,height,font-size即可(需要等比例改变大小)。但是还有一个问题,目前不支持自定义颜色。我们还需要改进代码,在.css-icon中设置颜色,具体图标的颜色则采用继承的方式:

/*--------------------------------------
pure css icons
author:liquanfeng
created:2014/9/4
version:1.0
blog:http://readit.sinaapp.com
---------------------------------------*/
/*global icon style*/
.css3-icon{
	position:relative;
	display:block;
	/*custom the icon size*/
	width:100px;height:100px;font-size:10px;
	background:#ccc;
	border-color:#456;
}
.css3-icon:hover:before,.css3-icon:hover:after{
	border-color:#ff7;/*custom your hover effect*/
}
.css3-icon:focus:before,.css3-icon:focus:after{
	border-color:#ff7;/*custom your focus effect*/
}
.css3-icon:active:before,.css3-icon:active:after{
	border-color:#ff7;/*custom your active effect*/
}
.css3-icon:visited:before,.css3-icon:visited:after{
	border-color:#ff7;/*custom your visited effect*/
}
.css3-icon:before,.css3-icon:after{
	content:"";
	position:absolute;left:0;
	background:transparent;
	font-size:1em;
}
/*global icon style end*/
/*---------------------
search icon
----------------------*/
.css3-icon-search:before {
    left:10%;top:5%;
    width:50%;height:50%;
    border:.9em solid;
    border-color:inherit;
    border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;
}
.css3-icon-search:after {
    left:55%;top:70%;
    width:40%;height:0;
    border-top:.9em solid;
    border-color:inherit;
    transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);
}

以上就是所有代码了,其他的图标都可以按这个框架来实现,利用旋转和border特性来画图标,然后在global style里面自定义尺寸和颜色就ok了。


-------------------------------------------------------华丽的分割线---------------------------------------------------------------------------------------------------------------------

以上写的代码还是有问题的,就是在.css3-icon里面设置了font-size:10px;本来这样做是为了方便后面使用em单位,但是没有考虑到Chrome不支持12px以下的字体,为了保证兼容性又方便计算,最好是设置font-size:100px;后面再使用em单位时直接除以10就行了,相当于0.01em=1px。

这样一来,.css3-icon中的width,height,font-size值都是100px了,使用时用JS脚本可以很方便的修改。而且font-size最小可到12px,就是说width,height最小值也是12px,12x12的图标,相当于小字体的高度了,完全可以适用于各种场合~


最后,根据修改后的方案,再来画一个太极图标,效果如下:


下面是html代码和CSS代码:

<a class="css3-icon css3-icon-taiji" href="#"></a>
.css3-icon-taiji{
	border-radius:50%;
	background:-moz-linear-gradient(center left, #fff, #fff 50%, black 50%, black);
	background:-webkit-gradient(linear, left center, right center, from(#fff), color-stop(50%,#fff), color-stop(50%, black), to(black));
	background:-o-linear-gradient(left, #fff, #fff 50%, black 50%, black);
	
}
.css3-icon-taiji:before{
	width:20%;height:20%;
	border-radius:50%;
	left:40%;top:15%;
	background:#000;
	box-shadow:0 0 0 .15em #fff;
}
.css3-icon-taiji:after{
	width:20%;height:20%;
	border-radius:50%;
	left:40%;bottom:15%;
	background:#fff;
	box-shadow:0 0 0 .15em #000;
}
.css3-icon-taiji:hover{
	-webkit-animation:taiji-animation 4s infinite  linear;
}
@-webkit-keyframes  taiji-animation{
	0%{
		 -webkit-transform: rotate(0deg);
	}
	50%{
		 -webkit-transform: rotate(180deg);
	}
	100%{
		 -webkit-transform: rotate(360deg);
	}
	
}

我给他加上了一个hover旋转动画,酷炫的太极!






相关文章
|
15天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求,提升加载速度;图标字体则以字体形式呈现图标,便于调整样式。文章分析了两者的优缺点及应用场景,并提供了应用技巧和注意事项,旨在帮助开发者提升页面性能,改善用户体验。
19 5
|
2月前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
16 0
|
2月前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
46 0
|
4月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
104 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
4月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
72 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
4月前
|
缓存 前端开发 Linux
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体
113 0
|
5月前
|
前端开发
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
css特效——纯css绘制图标:带框的加号(添加按钮)、三横(三道杠)、带圈点(双层圆点)
139 5
|
5月前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
70 2
|
5月前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
113 2
|
5月前
|
前端开发
css图标合并——ClipPath Sprites技术
css图标合并——ClipPath Sprites技术
48 1