Wie erstelle ich gerichtet beleuchtete 3D-Schaltflächen mit CSS?
Die gerichtet beleuchtete 3D-Taste ist ein Effekt, bei dem die Taste als 3D-Figur erscheint. Diese Schaltflächen werden mit HTML und CSS erstellt.
Ansatz: Der beste Weg, die HTML-Objekte zu animieren, besteht darin, CSS-Transformationen zu verwenden und die Transformationen in verschiedenen Phasen festzulegen.
- Erstellen Sie eine HTML-Datei.
- Verknüpfen Sie die CSS-Datei in HTML, die alle Effekte der Animation bereitstellt, mit unserem HTML.
- Fügen Sie drei Anker- <a> -Tags zum Erstellen von Schaltflächen hinzu und weisen Sie ihnen bestimmte Klassen zu.
HTML Quelltext:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content ="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="buttons.css" type="text/css"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div> <ul> <li id="like"> <a href="#"> <i class="fa fa-thumbs-up"></i> Like </a> </li> <li id="comment"> <a href="#"> <i class="fa fa-comment"></i> Comment </a> </li> <li id="share"> <a href="#"> <i class="fa fa-share"></i> Share </a> </li> </ul> </div> </body> </html>
CSS-Code: Das Folgende ist der Inhalt für die Datei „buttons.css“, die im obigen HTML-Code verwendet wird. CSS wird verwendet, um unserer HTML-Seite verschiedene Arten von Animationen, Transformationen und Effekten zu verleihen, damit sie für alle Benutzer interaktiv aussieht. Stellen Sie alle Browser-Effekte wieder her. Verwenden Sie Klassen und IDs, um Schaltflächen Effekte zuzuweisen. Verwenden Sie Transformationen, um gerichtet beleuchtete 3D-Schaltflächen zu erhalten.
buttons.css
*{ margin: 0; padding: 0; } div{ background: lightgreen; width: 100vw; height: 100vh; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; display: flex; align-items: center; justify-content: center; } ul{ position: absolute; display: flex; margin: 0; padding: 0; } a{ text-decoration: none; color: rgba(0,0,0,0.7); } i{ padding: 10px; } ul li{ list-style: none; margin: 10px; display: block; } ul li a{ width: 200px; height: 50px; background: orangered; display: flex; font-size: 20px; align-items: center; justify-content: center; transform: rotate(-30deg) skewX(25deg); box-shadow: -20px 20px 8px; rgba(0,0,0,0.5); } ul li a:before{ content:''; position:absolute; top:10px; left:-20px; background:orangered; height:100%; width:20px; transform:rotate(0deg) skewY(-45deg); } ul li a:after{ content:''; position:absolute; bottom:-20px; left:-10px; background:orangered; height:20px; width:100%; transform:rotate(0deg) skewX(-45deg); } li a:hover{ transform:rotate(-30deg) skew(25deg) translate(20px,-15px); }
Ausgabe: