Klicken Sie rechts auf die Schaltfläche „Zur Vorschau klicken“, um eine Vorschau auf der aktuellen Seite anzuzeigen, oder klicken Sie auf den Link, um eine Vorschau im Vollbildmodus anzuzeigen.
https://codepen.io/comehope/pen/RBjdzZ
Dieses Video ist interaktiv, Sie können das Video jederzeit anhalten und bearbeiten Code.
Bitte verwenden Sie Chrome, Safari, Edge zum Öffnen und Ansehen.
https://scrimba.com/p/pEgDAM/cgkE6C6
Dom definieren, der Container enthält 2 Elemente, die Stecker und Kabel darstellen:
<p class="cable">
<span class="head"></span>
<span class="body"></span>
</p>Mitte:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
}Containerabmessungen definieren:
.cable {
display: flex;
align-items: center;
font-size: 10px;
margin-left: 5em;
}Umriss des Steckers zeichnen:
.head {
width: 8.5em;
height: 8.5em;
border-radius: 2em 0 0 2em;
}Umriss der Pins am Stecker zeichnen:
.head {
position: relative;
}
.head::before {
content: '';
position: absolute;
width: 3em;
height: 7.3em;
top: calc((8.5em - 7.3em) / 2);
left: 0.7em;
border-radius: 1em;
box-sizing: border-box;
}Zeichnen Sie den Umriss des handgehaltenen Teils des Kabels:
.body {
width: 15.5em;
height: 11em;
border-radius: 0.5em;
}Zeichnen Sie den Umriss des etwas dickeren Teils des Kabels:
.body {
position: relative;
display: flex;
align-items: center;
}
.body::before {
content: '';
position: absolute;
width: 13.5em;
height: 6em;
left: 15.5em;
}Zeichnen Sie den Verlängerungsteil des Kabels:
.body::after {
content: '';
position: absolute;
width: 100vh;
height: 3.9em;
left: calc(15.5em + 13.5em);
}Verstecke die Teile außerhalb des Rahmens:
body {
overflow: hidden;
}Zeichne als nächstes die Details.
Malen Sie einen Farbverlauf für das Verlängerungskabel:
.body::after {
background:
linear-gradient(
white,
hsl(0, 0%, 96%) 5%,
hsl(0, 0%, 97%) 25%,
hsl(0, 0%, 95%) 40%,
hsl(0, 0%, 81%) 95%,
white
);
}Malen Sie einen Farbverlauf für den dickeren Teil des Kabels:
.body::before {
background:
linear-gradient(
white,
hsl(0, 0%, 96%) 5%,
hsl(0, 0%, 98%) 20%,
hsl(0, 0%, 95%) 50%,
hsl(0, 0%, 81%) 95%,
white
);
}Malen Sie einen Farbverlauf für den handgehaltenen Teil des Kabels:
.body {
background:linear-gradient(
hsl(0, 0%, 91%),
white 15%,
hsl(0, 0%, 93%) 50%,
hsl(0, 0%, 87%) 70%,
hsl(0, 0%, 79%) 90%,
hsl(0, 0%, 84%),
hsl(0, 0%, 86%)
);
}Malen Sie den Stecker mit einer Verlaufsfarbe:
.head {
background:
linear-gradient(
-45deg,
hsl(0, 0%, 75%),
hsl(0, 0%, 79%),
hsl(0, 0%, 78%),
hsl(0, 0%, 87%) 80%
);
}Zeichnen Sie die Stifte auf den Stecker:
.head::before {
background-color: white;
}
.head::after {
content: '';
position: absolute;
box-sizing: border-box;
width: 2.2em;
height: 0.4em;
color: goldenrod;
background-color: currentColor;
border-radius: 0.5em;
left: 1.1em;
top: 1.2em;
box-shadow:
0 0.8em 0,
0 1.6em 0,
0 2.4em 0,
0 3.2em 0,
0 4em 0,
0 4.8em 0,
0 5.6em 0;
}Fügen Sie als Nächstes einen Schatten hinzu, um das Kabel dreidimensionaler zu machen.
Schattieren Sie den Stecker:
.head {
background:
linear-gradient(
90deg,
transparent 80%,
rgba(0,0,0,12%)
),
linear-gradient(
-45deg,
hsl(0, 0%, 75%),
hsl(0, 0%, 79%),
hsl(0, 0%, 78%),
hsl(0, 0%, 87%) 80%
);
}Schattieren Sie den handgehaltenen Teil des Kabels:
.body::before {
background:
linear-gradient(
45deg,
rgba(0,0,0,4%) 10%,
transparent 20%
),
linear-gradient(
90deg,
rgba(0,0,0,4%),
transparent 10%
),
linear-gradient(
white,
hsl(0, 0%, 96%) 5%,
hsl(0, 0%, 98%) 20%,
hsl(0, 0%, 95%) 50%,
hsl(0, 0%, 81%) 95%,
white
);
}Schattieren Sie den dickeren Teil des Kabels:
.body::after {
background:
linear-gradient(
45deg,
rgba(0,0,0,4%),
transparent 4%
),
linear-gradient(
90deg,
rgba(0,0,0,4%),
transparent 2%
),
linear-gradient(
white,
hsl(0, 0%, 96%) 5%,
hsl(0, 0%, 97%) 25%,
hsl(0, 0%, 95%) 40%,
hsl(0, 0%, 81%) 95%,
white
);
}Fügen Sie abschließend die Eingangsanimation hinzu zum Bildschirm
.cable {
animation: show 5s linear infinite;
}
@keyframes show {
0% {
transform: translateX(100vw);
}
20%, 100% {
transform: translateX(0);
}
}Du bist fertig!
Verwandte Artikel:
Erstellen Sie einen Spindelteiler mit reinem CSS3
So erstellen Sie eine einfache fünfzackige Sterngrafik mit reinem CSS3
Ähnliche Videos:
Video-Tutorial zu praktischen Fähigkeiten der CSS-Animation
Das obige ist der detaillierte Inhalt vonEin Beispiel für die Erstellung einer Lightning-Verbindungslinie mithilfe der CSS-Sprache. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
