css3实现各种图标效果

2019-09-13 郑州网站建设  

需要说现在绝大多数企业的项目前端都是一团乱,不仅仅是js写的没有任何框架而言,css同样也是如此,导致项目如果要升级或者说有新的变更维护起来就非常困难。

最近领导决定花大时间整理一下css样式,用他的一句话来说就是为后来者造福。

首先我们在整理样式之前,必须得有一个自己团队的规范。

思考真的很重要,所谓的磨刀不误砍柴工,事实上也就是说你在做任何事情之前都要把大致的流程,大致的思路想清晰之后再动手,否则就可能做到一半发现这样不对,然后前面的工夫全白费了,这样启不是。。。

前面说了一堆费话,下面就简单点来介绍一下我整理的图标(全部用css来实现的)。

css没有继承、多态等,所以为了write less ,do more就不得不想尽各种办法(我们自己规定凡是公共的、组件级别的样式全部以u-开头)。

我这里因为写所有标签的样式名都是以u-icon开头,所以写了如下样式,这样的话所有的以u-icon开头的全部都应用了如下三个样式,你想如果你有100u-icon的样式那就省去了你300行代码呀!

[class^="u-icon"]{

display: inline-block;

color: #fff;

vertical-align: middle;

}

手机上的切换标签

html代码如下:

<span class="u-icon-toggle"><i></i></span>

<span class="u-icon-toggle on"><i></i></span>

页面显示效果如下:

css3实现各种图标效果

 

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代码如下:

<span class="u-icon-pointB cur"></span>

<span class="u-icon-pointB"></span>

<span class="u-icon-pointO"></span>

<span class="u-icon-pointO cur"></span>

页面显示效果如下:

css3实现各种图标效果

 

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代码如下:

<span class="u-icon-arr"></span>

<span class="u-icon-arr u-icon-arrD"></span>

<span class="u-icon-arr u-icon-arrU"></span>

页面显示效果如下:

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;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2120.html转载请标明出处,谢谢合作!
标签:
  • 样式
  • CSS3
  • 现在
  • 大多数
  • Ч
  • 应该
  • 公共