如何使用css3实现各种图标效果
这篇文章主要为大家展示了如何使用css3实现各种图标效果,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“如何使用css3实现各种图标效果”这篇文章吧。
成都创新互联主要从事成都做网站、成都网站设计、成都外贸网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务达川,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
公共样式
应该说现在绝大多数公司的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就特别困难。
最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福。
首先我们在整理样式之前,必须得有一个自己团队的规范。
思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清楚之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,这样启不是。。。
前面说了一堆费话,下面就简单点来介绍一下我整理的图标(全部用css来实现的)。
css没有继承、多态等,所以为了write less ,do more就不得不想尽各种方法(我们自己规定凡是公共的、组件级别的样式全部以u-开头)。
我这里因为写所有标签的样式名都是以u-icon开头,所以写了如下样式,这样的话所有的以u-icon开头的全部都应用了如下三个样式,你想如果你有100个u-icon的样式那就省去了你300行代码呀!
[class^="u-icon"]{
display: inline-block;
color: #fff;
vertical-align: middle;
}
手机上的切换标签
html代码如下:
css样式代码:
/*手机上的切换标签*/
.u-icon-toggle{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
}
/*因为这里可能会在父元素上加on也可能在子元素上加on所以*/
.on.u-icon-toggle, .on .u-icon-toggle{
box-shadow: 0 0 0 1px #4089e8;
background-color: #4089e8;
}
.u-icon-toggle i{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
-webkit-box-shadow: 0 0 2px #bbb;
border-radius: 100%;
background-color: #fff;
-webkit-transition: 300ms linear;
-webkit-transform: translate3d(0,0,0);
}
.on.u-icon-toggle i, .on .u-icon-toggle i{
-webkit-transform: translate3d(30px,0,0);
}
各种点(空心点、实心点、蓝色点、橙色点)
html代码如下:
css样式代码:
.u-icon-pointB, .u-icon-pointO{
width: 6px;
height: 6px;
margin: 0 3px;
border-radius: 100%;/*圆角为100%就实现圆的效果*/
box-shadow: 0 0 0 1px #6bb5ff;
}
/*机票筛选界面橙色点icon*/
.u-icon-pointO{
background-color: #fff;
box-shadow: 0 0 0 1px #ff5d1d;
}
/*蓝色点icon*/
.cur.u-icon-pointB,.cur .u-icon-pointB{
background-color: #6bb5ff;/*如果背景和boder颜色不一致 则为空心圆*/
}
.cur.u-icon-pointO,.cur .u-icon-pointO{
background-color: #ff5d1d;
}
箭头
html代码如下:
页面显示效果如下:
用css3实现各种图标效果
css样式代码:
.u-icon-arr{
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
margin-top: -2px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;
}
css的选择器有哪些
css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等
以上就是关于“如何使用css3实现各种图标效果”的内容,如果该文章对您有所帮助并觉得写得不错,劳请分享给您的好友一起学习新知识,若想了解更多相关知识内容,请多多关注创新互联行业资讯频道。
新闻标题:如何使用css3实现各种图标效果
网站URL:http://scyanting.com/article/poepec.html