Menu de navegação do Coreboot

Abrir no Editor Publique Seu Código

Recomendado

4 June 2025

Efeito de foco de botão animado em CSS

19 May 2025

@import url(https://fonts.bunny.net/css?family=nunito:400,400i,600,600i,800,800i);
*,*::before,*::after{box-sizing:border-box}body{margin:0;padding:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;font-family:'Nunito', sans-serif;font-size:16px;line-height:1.5}
:root{
    --color1:#000;
    --color2:#fff;
    --height:40px;
    --width:110px;
    --border:2px;
}
#cubicle {
    height: var(--height);
}
#cubicle > .links {
    display: flex;
    width: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none
}
#cubicle > .links li {
    flex: 1;
    min-width: var(--width);
    height: var(--height);
    margin: 0 0 0 calc(-1 * var(--border));
    perspective: 1000px;
    z-index: 1
}
#cubicle > .links li:first-child {
    margin-left: 0;
}
#cubicle > .links li:hover {
    z-index: 2
}
#cubicle > .links a {
    display: block;
    height: var(--height);
    position: relative;
    text-decoration: none;
    transform-style: preserve-3d;
    transform: translateZ(calc(-1 * calc(var(--height) / 2)));
    transition: transform 0.5s cubic-bezier(.08,.82,.17,1)
}
#cubicle > .links a:hover {
    transform: translateZ(calc(-1 * calc(var(--height) / 2))) rotateX(-90deg);
}
#cubicle > .links a::before,
#cubicle > .links a::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--width);
    height: var(--height);
    position: absolute;
    border: var(--border) solid var(--color1);
    content: attr(title);
}
#cubicle > .links a::before {
    background-color: var(--color2);
    color: var(--color1);
    transform: rotateY(0deg) translateZ(calc(var(--height) / 2))
}
#cubicle > .links a::after {
    background-color: var(--color1);
    color: var(--color2);
    transform: rotateX(90deg) translateZ(calc(var(--height) / 2))
}

Menu de navegação do Coreboot

Recomendado

Um código de Mete

Efeito de foco de botão animado em CSS

animação de avião

HTML

CSS

JS

Recomendado

Um código de Mete

Efeito de foco de botão animado em CSS

animação de avião

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS