Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Hover-Effekt von verschiebbaren dekorativen Elementen von beiden Seiten der Schaltfläche zu realisieren (Quellcode beigefügt). Es hat einen gewissen Referenzwert Referenz, ich hoffe, es wird Ihnen hilfreich sein.
https://github.com/comehope/front- end-daily-challenges
Dom definieren, der Container ist eine ungeordnete Liste und die Listenelemente stellen Schaltflächen dar:
Zentrierte Anzeige:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(deepskyblue, navy);
}Entfernen Sie das Symbol vor dem Listenelement:
ul {
padding: 0;
list-style-type: none;
}Legen Sie den Textstil der Schaltfläche fest:
ul li {
color: #ddd;
font-size: 25px;
font-family: sans-serif;
text-transform: uppercase;
}Verwenden Sie ein Pseudoelement, um links neben der Schaltfläche ein Feld hinzuzufügen:
ul li {
position: relative;
}
ul li::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: tomato;
left: -100%;
}Pseudoelement verwenden Fügen Sie rechts neben der Schaltfläche eine Unterstreichung hinzu:
ul li::after {
content: '';
position: absolute;
width: 100%;
height: 0.2em;
background: tomato;
bottom: 0;
left: 100%;
} Richten Sie als Nächstes den Mouseover-Effekt ein.
Wenn die Maus schwebt, bewegt sich das Quadrat auf der linken Seite an die Position des Texts:
ul li::before {
transition: 0.4s ease-out;
}
ul li:hover::before {
left: 100%;
}Die Unterstreichung auf der rechten Seite bewegt sich an die Position des Texts und ihre Animationszeit wird bis zum verschoben Die Animation des Quadrats endet kurz vor dem Start:
ul li::after {
transition: 0.3s 0.3s ease-out;
}
ul li:hover::after {
left: 0%;
}Erhöhen Sie gleichzeitig die Helligkeit des Textes:
ul li {
transition: 0.3s;
cursor: pointer;
}
ul li:hover {
color: #fff;
}Verstecken Sie den Teil außerhalb der Schaltfläche, sodass die Quadrate und Unterstreichungen sind standardmäßig unsichtbar, wenn die Maus darüber schwebt:
ul li {
overflow: hidden;
}Fügen Sie zum Schluss noch ein paar Schaltflächen zum Dom hinzu:
Layout mehrerer Schaltflächen:
ul {
display: flex;
flex-direction: column;
align-items: center;
}
ul li {
margin: 0.5em;
}Du bist fertig!
Weitere coole CSS3- und Javascript-Spezialeffektcodes finden Sie unter: Javascript-Spezialeffektsammlung
Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um den Hover-Effekt des Verschiebens dekorativer Elemente von beiden Seiten der Schaltfläche zu erzielen (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
