css keyboard animation | CTRL+C CTRL+V KEYS RGB
.png "css keyboard animation")
**Introduction: css keyboard animation | CTRL+C CTRL+V KEYS RGB**
In the ever-evolving landscape of web design, the marriage of functionality and aesthetics plays a pivotal role in enhancing user interaction. The "CSS Keyboard Animation" we explore here introduces a visually stimulating representation of the CTRL+C (Copy) and CTRL+V (Paste) keyboard shortcuts. This creative endeavor brings together the principles of CSS animations and the iconic RGB color scheme, transforming a mundane user action into an engaging visual experience.
As users universally navigate through digital spaces, keyboard shortcuts have become second nature, streamlining tasks and boosting productivity. In this exploration, we delve into the art of translating these functional commands into a dynamic and colorful display. The animation captures the essence of CTRL+C and CTRL+V, showcasing a visually vibrant keyboard that responds to user input, providing not only a functional cue but also an aesthetically pleasing interaction.
Join us on this journey as we dissect the CSS Keyboard Animation, unraveling the code behind the dynamic RGB color transitions and exploring how this creative implementation adds a touch of flair to the user's digital experience.
ScreenShots
.png "css keyboard animation")
start, add the following HTML codes to your index.html file.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title> ctrl+c ctrl+v keys RGB</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keyborad">
<div class="keyboadr-inner">
<div class="key">
<div class="key-cotnent">Ctrl</div>
</div>
<div class="key">
<div class="key-cotnent">C</div>
</div>
<div class="key">
<div class="key-cotnent">V</div>
</div>
</div>
</div>
</body>
</html>
Next, add the following CSS codes to your style.css
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #222;
background: linear-gradient(to bottom left, #2a2a2a, #1a1a1a);
font-family: system-ui;
}
.keyborad {
--radius: 4vmin;
--red: #ff6464;
--green: #64c864;
--blue: #6464ff;
background-color: #111;
padding: 2vmin;
border-radius: var(--radius);
box-shadow: 0 4vmin #0b0b0b, -2vmin 5vmin 4vmin #0a0a0a;
position: relative;
box-sizing: border-box;
}
.keyborad:after {
content: '';
height: 100vh;
width: 1.2vw;
bottom: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(to left, #111, #222, #111, #111);
box-shadow: -0.4vmin 0 1vmin #111;
}
.keyborad:before {
content: "@andreuscafe";
position: absolute;
top: calc(100% + 1.2vmin);
left: 0;
width: 100%;
text-align: center;
color: #3a3a3a;
font-size: 1.5vmin;
}
.keyborad .keyboadr-inner {
display: flex;
gap: 1vmin;
padding: 0.75vmin 1vmin 1vmin;
overflow: hidden;
background-color: #222;
border-radius: calc(var(--radius) * 0.5);
box-shadow: 0 0.5vmin rgba(0, 0, 0, 1) inset;
}
.keyborad .keyboadr-inner .key {
width: 10vmin;
height: 9vmin;
padding: 0.6vmin 0.6vmin 0.9vmin;
top: 0.5vmin;
position: relative;
overflow: hidden;
border-radius: calc(var(--radius) * 0.5);
transform: translate3d(0, 0, 0);
animation: shadow 5s -0.5s linear infinite;
--delay: 0;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 1) {
--delay: 0.2s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 1) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 2) {
--delay: 0.4s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 2) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 3) {
--delay: 0.6s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 3) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 4) {
--delay: 0.8s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 4) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 5) {
--delay: 1s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 5) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 6) {
--delay: 1.2s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 6) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 7) {
--delay: 1.4s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 7) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 8) {
--delay: 1.6s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 8) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 9) {
--delay: 1.8s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 9) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 10) {
--delay: 2s;
animation: shadow 5s calc(-0.5s + var(--delay)) linear infinite;
}
.keyborad .keyboadr-inner .key:nth-child(1n + 10) .key-cotnent {
animation: color 5s calc(-0.5s + var(--delay)) linear infinite;
}
@keyframes shadow {
0% {
box-shadow: 0 0 5vmin -2vmin var(--red);
}
33% {
box-shadow: 0 0 5vmin -2vmin var(--blue);
}
66% {
box-shadow: 0 0 5vmin -2vmin var(--green);
}
100% {
box-shadow: 0 0 5vmin -2vmin var(--red);
}
}
.keyborad .keyboadr-inner .key:before {
content: '';
width: 400vmin;
height: 400vmin;
position: absolute;
top: 150%;
left: 150%;
transform: translate(-50%, -50%);
background: conic-gradient(var(--red), var(--green), var(--blue), var(--red));
animation: spin 5s var(--delay) linear infinite;
}
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.keyborad .keyboadr-inner .key .key-cotnent {
width: 100%;
height: 100%;
background-color: #111;
position: relative;
border-radius: calc(var(--radius) * 0.4);
font-size: 3vmin;
top: -0.3vmin;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 1;
cursor: pointer;
user-select: none;
box-shadow: 0 0.6vmin rgba(0, 0, 0, 0.6);
transition: top 0.1s ease-in-out, box-shadow 0.1s ease-in-out, background-color 0.1s ease-in-out;
}
.keyborad .keyboadr-inner .key .key-cotnent:active {
top: 0vmin;
box-shadow: 0 0.3vmin rgba(0, 0, 0, 0.6);
background-color: rgba(17, 17, 17, 0.9);
}
@keyframes color {
0% {
color: var(--red);
}
33% {
color: var(--blue);
}
66% {
color: var(--green);
}
100% {
color: var(--red);
}
}