Comment utiliser CSS3 pour créer des effets d'icône

En parlant des projets d'entreprise actuels, je pense que le front-end de nombreuses entreprises est en désordre, non seulement parce que JS n'a pas de framework, mais que CSS n'utilise pas de framework, ce qui conduit à des projets qui doivent être mis à niveau. ou entretenu. C'est extrêmement difficile.

Récemment, le leader a décidé de passer beaucoup de temps à trier le style CSS. Selon ses mots, cela profitera à ceux qui viendront après nous.

Tout d'abord, avant d'organiser les styles, nous devons avoir un standard pour notre propre équipe.

La réflexion est vraiment importante. Le soi-disant affûtage du couteau ne vous fait pas perdre de temps à couper du bois. En fait, cela signifie que vous devez réfléchir au processus général et aux idées générales avant de faire quoi que ce soit, sinon vous pourriez le découvrir. à mi-chemin, c'est faux, et alors tous les efforts précédents seront vains, et ce n'est pas un bon début. . .

J'ai déjà dit beaucoup de mots inutiles, je vais maintenant présenter brièvement les icônes que j'ai compilées (toutes implémentées avec CSS).

CSS n'a pas d'héritage, de polymorphisme, etc., donc pour écrire moins et faire plus, nous devons penser à différentes méthodes (nous avons stipulé que tous les styles publics et au niveau des composants commencent par u- ).

Étant donné que les noms de style de toutes les étiquettes que j'écris ici commencent par u-icon, j'ai écrit les styles suivants de cette façon, tous les styles commençant par u-icon ont les trois styles suivants appliqués. Si vous disposez de 100 styles d'icônes en U, vous économiserez 300 lignes de code !

[class^="u-icon"]{
display: inline-block;
color: #fff;
vertical-align: middle;
}
手机上的切换标签
html代码如下：
<span><i></i></span>
<span class="u-icon-toggle on"><i></i></span>

L'effet d'affichage de la page est le suivant :

Code de style 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></span>
<span></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></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;
}

Il y a tellement de tutoriels sur la création d'effets d'icônes avec CSS3, veuillez payer attention aux articles plus excitants. Autres articles connexes sur le site Web chinois php !

Lecture connexe :

Comment convertir l'encodage CSS

cliquez sur CSS3 pour afficher les effets d'entraînement

Comment créer une animation de vol de papillon avec CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!