CSS, um einen 3D-Schaltflächeneffekt zu erzielen

Dieses Mal werde ich Ihnen CSS vorstellen, um einen 3D-Schaltflächeneffekt zu erzielen. Was sind die Vorsichtsmaßnahmen für CSS, um einen 3D-Schaltflächeneffekt zu erzielen? Hier ist ein praktischer Fall.

CSS nutzt geschickt Box-Shadow, um den dreidimensionalen Effekt von 3D-Objekten zu erzielen. Wenn die Taste gedrückt wird, werden die Box-Shadow- und Top-Werte geändert.

Es fühlt sich an, als würde ein Knopf gedrückt. Der CSS-Code ist sehr klein, wie unten gezeigt

a.css-3d-btn{
 position: relative;
 color: rgba(255, 255, 255, 1);
 text-decoration: none;
 background-color: rgba(219, 87, 51, 1);
 font-family: "Microsoft YaHei", 微软雅黑, 宋体;
 font-weight: 700;
 font-size: 3em;
 display: block;
 padding: 4px;
 border-radius: 8px;
 /* let's use box shadows to make the button look more 3-dimensional */
 box-shadow: 0px 9px 0px rgba(219, 31, 5, 1), 0px 9px 25px rgba(0, 0, 0, .7);
 margin: 100px auto;
 width: 160px;
 text-align: center;
 -webkit-transition: all .1s ease;
 -moz-transition: all .1s ease;
 transition: all .1s ease;
}
/* now if we make the box shadows smaller when the button is clicked, it'll look like the button has been "pushed" */
a.css-3d-btn:active{
 box-shadow: 0px 3px 0px rgba(219, 31, 5, 1), 0px 3px 6px rgba(0, 0, 0, .9);
 position: relative;
 top: 6px;
}

Der Effekt ist wie folgt:

Ich glaube es, nachdem ich es gelesen habe. Sie beherrschen die Methode im Fall dieses Artikels. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Verwenden Sie transparent, um ein Dreieck zu erstellen

HTML5+CSS3-Ladefortschrittsbalken und Download-Fortschrittsbalkenimplementierung

Das obige ist der detaillierte Inhalt vonCSS, um einen 3D-Schaltflächeneffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!