CSS3を使用してアイコン効果を作成する方法

現在の企業プロジェクトについて言えば、多くの企業のフロントエンドは混乱していると思います。JS にフレームワークがないだけでなく、CSS にもフレームワークが使用されていないため、必要なときにプロジェクトが特に困難になっています。アップグレードまたはメンテナンス。

最近、リーダーは CSS スタイルを整理することに多くの時間を費やすことにしました。彼の言葉によれば、それは私たちの後に来る人たちにとって有益です。

まず、スタイルを整理する前に、自分のチームの基準を持たなければなりません。

考えることは本当に重要です。いわゆる木こりを研ぐということは、何かを始める前に、一般的なプロセスと一般的なアイデアをよく考えなければならないことを意味します。これは間違っていると半ば気づきましたが、これは正しいスタート方法ではありませんでした。 。 。

無駄なことばかり言ってしまいましたが、今回は私がまとめたアイコン（全てCSSで実装）を簡単にご紹介します。

CSS には継承やポリモーフィズムなどがありません。そのため、記述量を減らしてより多くのことを実行するには、さまざまな方法を考える必要があります (パブリック スタイルとコンポーネント レベルのスタイルはすべて u- で始まるように規定しています)。

ここで書くラベルのスタイル名はすべてu-iconで始まるので、次のようなスタイルを書きました。100個あると、u-iconで始まるすべてのスタイルに次の3つのスタイルが適用されると思います。 u アイコン スタイルを使用すると、コードを 300 行節約できます。

[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>

ページ表示効果は次のとおりです:

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;
}

css3 でアイコン効果を作成するためのチュートリアルがたくさんあります。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。

関連記事:

CSSエンコーディングを変換する方法

css3クリックして波紋効果を表示

CSS3で蝶が飛ぶアニメーションを作成する方法

以上がCSS3を使用してアイコン効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。