Css Liquid Animations in Google Bard vs ChatGPT Code
**Introduction: Css Liquid Animations in Google Bard vs ChatGPT Code**
Dive into the captivating realm of CSS animation as we dissect the differences between GPT and Bard. Join us on a journey of exploration and mastery, unraveling the artistic nuances that each technology brings to the world of web animation. From seamless transitions to mesmerizing effects, this showdown promises a deep dive into the intricate artistry of CSS animation. #CSS Animation, #GPT, #Bard, #Web Development, #Code Artistry, Animation Showdown, #Web Design, Creative Coding, #Technology Comparison, #Code Evolution, #Web Animation Mastery.
ScreenShots
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);
}
}