先看看画出来的效果:
注意没有使用图片,而是在支持css3的浏览器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的纯css画出来的icon效果截图,而且html代码也非常简单。
仔细观察静音的这个icon,由4部分构成,一个圆圈,一个斜线,一个正方形,一个三角形。
圆圈可以使用css3里面的圆角实现。
斜线可以是一个元素的边框,然后经过转45度得到。
正方形就不用说了。
三角形可以使用边框来实现。
如果给每个元素一个标签,可想html结构是比较复杂,幸好可以使用:before :after伪元素来实现。
代码: <style type="text/css">
.mute{font: 50px/1.4 "Microsoft YaHei";position:relative;z-index:1;overflow:hidden; padding-left:50px;}
.mute a{text-decoration:none; color:#444; font-weight:bold;}
/*将4个元素的坐标原点成容器的左中*/
.mute:before, .mute:after, .mute a:before, .mute a:after {
content: "";
position: absolute;
top: 50%;
left: 0;
}
/*.mute前面的伪元素实现圆圈*/
.mute:before{
width: 40px;
height: 40px;
border: 1px solid #C55500;
margin-top: -19px;
-webkit-border-radius: 40px;/*圆角半径为元素宽度,这样,每一个圆角成为1/4圆*/
-moz-border-radius: 40px;
border-radius: 40px;
}
/*.mute后面的伪元素实现斜线,边框旋转45度得到*/
.mute:after {
width: 40px;
border-top: 1px solid #C55500;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*a的前面伪元素实现三角形*/
.mute a:before {
left: -3px;
border: 17px solid transparent;
border-right-color: #C55500;
margin-top: -16px;
background: transparent;
}
/*a后面的伪元素画一个正方形放在合适的位置*/
.mute a:after {
height: 16px;
left: 8px;
margin-top: -8px;
width: 16px;
background-color:#C55500;
}
</style>
<!-- html就这么简单 -->
<span class="mute">
Mute</span>
使用css3实现的icon的最大优点在于可以自由的改变icon的颜色,而不是做很多图片,icon更像是用画笔画出来的,可控性强,易于修改和扩展。
分享到:
相关推荐
搜索图标 search icon 使用css3的after特性进行search icon。 使用css3的after特性进行search icon css before search-icon
css3动画图标效果 css3动画图标效果 css3动画图标效果
css3实现Icon UI图标是一款鼠标移到相应的图标会出现信息提示框效果。 css3实现Icon UI图标演示图:
js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。
css3实现Metro Icon是一款基于CSS3实现的Metro UI字体图标效果。 css3实现Metro Icon特效图:
http://blog.csdn.net/chelen_jak/article/details/19235517 CSS3图片画廊效果
css 3 动画实实现点赞动画,技术栈使用到了css 中的transform这个属性,项目中有需要的修改之处,请即使之处,这里会即使修改,
纯css3画正六边形
一共27个各式各样的CSS3动画效果源代码,内容如下:纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人...
css3模拟按钮图标icon css3模拟按钮图标icon css3模拟按钮图标icon
css3动画仿加速球水波流动效果 参考地址: https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
使用css进行search icon
一款CSS3画廊相册效果,含实例下载,CSS3一般在IE9以上版本才支持,或者您直接使用3.5版以上的火狐也可以,如果你是一位CSS前端开发者,必备火狐是基矗本CSS3画廊只是一个简单的CSS3应用实例,利用CSS3特性为相册...
27个精致的CSS3动画效果
纯CSS3动画按钮效果 5种漂亮样式,在www.html5tricks.com这边看到的,分享
使用 html 加 css3 动画完成模仿 QQ 静态页面。 使用html加css3动画完成模仿QQ静态页面,其中使用css3动画较多 html QQ css
CSS3-Slider是一款简单的带5种动画过渡效果的纯CSS3幻灯片特效。该幻灯片使用纯CSS3制作,使用非常简单,只需要按指定的格式编写HTML代码,并引入相应的CSS文件即可正常工作。
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。
这是一款使用CSS3 animation动画和png图片制作的css3线条波浪动画效果。该特效中,使用了3张波浪线条的png图片,以及少量的CSS代码,制作出逼真的线条波浪动画效果。