模板:KeyboardStyle
<style> .KeyboardStyle {
display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; background-color: #000; color: #fff; font-size: 13px; border: 0.5px solid rgba(0, 0, 0, 0.1); padding-bottom: 8px; height: 65px; padding: 12px; border-radius: 15px 15px 12px 12px; cursor: pointer; position: relative; will-change: transform; transition: all .1s ease-in-out 0s; user-select: none; /* Add gradient shading to each side */ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: bottom right, bottom right; background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; box-shadow: inset -4px -10px 0px rgba(255, 255, 255, 0.4), inset -4px -8px 0px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(0, 0, 0, 0.3), 0px 2px 1px rgba(255, 255, 255, 0.1); transform: perspective(70px) rotateX(5deg) rotateY(0deg);
}
.KeyboardStyle::after {
content: ; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.5)); z-index: -1; border-radius: 15px; box-shadow: inset 4px 0px 0px rgba(255, 255, 255, 0.1), inset 4px -8px 0px rgba(0, 0, 0, 0.3); transition: all .1s ease-in-out 0s;
}
.KeyboardStyle::before {
content: ; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); background-position: bottom right, bottom right; background-size: 100% 100%, 100% 100%; background-repeat: no-repeat; z-index: -1; border-radius: 15px; transition: all .1s ease-in-out 0s;
}
.KeyboardStyle:active {
will-change: transform; transform: perspective(80px) rotateX(5deg) rotateY(1deg) translateY(3px) scale(0.96); height: 64px; border: 0.25px solid rgba(0, 0, 0, 0.2); box-shadow: inset -4px -8px 0px rgba(255, 255, 255, 0.2), inset -4px -6px 0px rgba(0, 0, 0, 0.8), 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 1px 0px rgba(255, 255, 255, 0.2); transition: all .1s ease-in-out 0s;
}
.KeyboardStyle::after:active {
background-image: linear-gradient(to bottom,rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.2));
}
.KeyboardStyle:active::before {
content: ""; display: block; position: absolute; top: 5%; left: 20%; width: 50%; height: 80%; background-color: rgba(255, 255, 255, 0.1); animation: overlay 0.1s ease-in-out 0s; pointer-events: none;
}
.KeyboardStyle svg {
width: 15px; height: 15px;
}
@keyframes overlay {
from { opacity: 0; }
to { opacity: 1; }
}
.KeyboardStyle:focus {
outline: none;
} </style>