So verwenden Sie CSS3 zum Erstellen von Symboleffekten

Apropos aktuelle Unternehmensprojekte: Ich glaube, dass das Front-End vieler Unternehmen ein Chaos ist, nicht nur, weil JS kein Framework hat, sondern CSS auch kein Framework verwendet, was zu Projekten führt, die aktualisiert werden müssen oder aufrechterhalten. Es ist äußerst schwierig.

Vor kurzem hat der Anführer beschlossen, viel Zeit damit zu verbringen, den CSS-Stil zu klären. Seiner Meinung nach wird es denjenigen zugute kommen, die nach uns kommen.

Bevor wir die Stile organisieren, müssen wir zunächst einen Standard für unser eigenes Team haben.

Nachdenken ist wirklich wichtig. Das sogenannte Schärfen des Messers verschwendet keine Zeit beim Holzhacken. Vielmehr bedeutet es, dass Sie den allgemeinen Prozess und die allgemeinen Ideen durchdenken müssen, bevor Sie etwas unternehmen Auf halbem Weg ist das falsch, und dann werden alle bisherigen Bemühungen umsonst sein, und das ist kein guter Anfang. . .

Ich habe schon viele verschwenderische Worte gesagt, jetzt werde ich kurz die von mir zusammengestellten Symbole vorstellen (alle mit CSS implementiert).

CSS verfügt nicht über Vererbung, Polymorphismus usw. Um weniger zu schreiben und mehr zu tun, müssen wir uns verschiedene Methoden überlegen (wir haben festgelegt, dass alle öffentlichen Stile und Stile auf Komponentenebene mit u beginnen) ).

Da die Stilnamen aller Beschriftungen, die ich hier schreibe, mit u-icon beginnen, habe ich die folgenden Stile geschrieben. In diesem Fall werden auf alle Stile, die mit u-icon beginnen, die folgenden drei Stile angewendet Wenn Sie 100 U-Icon-Stile haben, sparen Sie 300 Zeilen 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>

Der Seitenanzeigeeffekt ist wie folgt:

CSS-Stilcode:

/*手机上的切换标签*/
.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;
}

Es gibt so viele Tutorials zum Erstellen von Symboleffekten mit CSS3, bitte zahlen Sie Achtung für weitere spannende Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie die CSS-Codierung

CSS3 klicken, um Welleneffekte anzuzeigen

So erstellen Sie eine Schmetterlingsfluganimation mit CSS3

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3 zum Erstellen von Symboleffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!