So erzielen Sie mit reinem CSS den Animationseffekt einer dreidimensionalen Schaltfläche mit metallischem Glanz (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt von dreidimensionalen Schaltflächen mit metallischem Glanz zu realisieren. Ich hoffe, dass er einen gewissen Referenzwert hat es wird dir helfen.

Effektvorschau

Quellcode-Download

https://github.com/comehope/front-end-daily-challenges/ tree/master/004-metallic-glossy-3d-button-effects

Codeinterpretation

Definieren Sie einen Container im Dom:

<div class="box">BUTTON</div>

Container wird in der Mitte angezeigt:

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

Legen Sie den 2D-Stil der Schaltfläche fest. Um die Anpassung der Schaltflächengröße zu erleichtern, wird eine Variable verwendet:

.box {
    background: linear-gradient(to right, gold, darkorange);
    color: white;
    --width: 250px;
    --height: calc(var(--width) / 3);
    width: var(--width);
    height: var(--height);
    text-align: center;
    line-height: var(--height);
    font-size: calc(var(--height) / 2.5);
    font-family: sans-serif;
    letter-spacing: 0.2em;
    border: 1px solid darkgoldenrod;
    border-radius: 2em;
}

Legen Sie den 3D-Stil der Schaltfläche fest:

.box {
    transform: perspective(500px) rotateY(-15deg);
    text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
}

Definieren Sie den Mouseover-Animationseffekt der Schaltfläche:

.box:hover {
    transform: perspective(500px) rotateY(15deg);
    text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box {
    transition: 0.5s;
}

Glanz mit Pseudoelementen hinzufügen:

.box {
    position: relative;
}

.box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, white, transparent);
    left: 0;
}

Glanzanimationseffekt definieren:

.box::before {
    left: -100%;
    transition: 0.5s;
}

.box:hover::before {
    left: 100%;
}

Zum Schluss ausblenden der Inhalt außerhalb des Behälters:

.box {
    overflow: hidden;
}

Du bist fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um einen Textumbruch-Animationseffekt zu erzielen (Quellcode im Anhang)

So verwenden Sie CSS, um einen Farbverlauf zu erzielen animierter Rahmeneffekt (mit Code)

So verwenden Sie CSS und den Farbmischmodus, um einen Loader-Animationseffekt zu erzielen (mit Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Animationseffekt einer dreidimensionalen Schaltfläche mit metallischem Glanz (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!