css keyboard animation | CTRL+C CTRL+V KEYS RGB

codinglabsolution

             

css keyboard animation | CTRL+C CTRL+V KEYS RGB



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

css keyboard animation









Source Code

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);
 }
}






























































































































































































































إرسال تعليق

ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
أُووبس!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.