当前位置：首页 > article >正文

HTML 与 CSS 演绎敲击键盘的灵动之手

article 2024/10/25 16:30:25

效果演示

这段代码是一个HTML和CSS的组合，用来创建一个动画效果，模拟一只手在敲击键盘的动作。
在这里插入图片描述

代码（一键复制）

 <div class="🤚">
    <div class="👉"></div>
    <div class="👉"></div>
    <div class="👉"></div>
    <div class="👉"></div>
    <div class="🌴"></div>
    <div class="👍"></div>
</div>

这段 HTML 代码定义了一个父容器 div 元素，其类名为 “🤚”，在这个父容器内包含了五个类名为 “👉” 的子元素和两个分别类名为 “🌴” 和 “👍” 的子元素。可以自定义类名

CSS

.🤚 {
  --skin-color: #E4C560;
  --tap-speed: 0.6s;
  --tap-stagger: 0.1s;
  position: relative;
  width: 80px;
  height: 60px;
  margin-left: 80px;
}
.🤚:before {
  content: '';
  display: block;
  width: 180%;
  height: 75%;
  position: absolute;
  top: 70%;
  right: 20%;
  background-color: black;
  border-radius: 40px 10px;
  filter: blur(10px);
  opacity: 0.3;
}
.🌴 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--skin-color);
  border-radius: 10px 40px;
}
.👍 {
  position: absolute;
  width: 120%;
  height: 38px;
  background-color: var(--skin-color);
  bottom: -18%;
  right: 1%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-20deg);
  border-radius: 30px 20px 20px 10px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid rgba(0, 0, 0, 0.1);
}
.👍:after {
  width: 20%;
  height: 60%;
  content: '';
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  bottom: -8%;
  left: 5px;
  border-radius: 60% 10% 10% 30%;
  border-right: 2px solid rgba(0, 0, 0, 0.05);
}
.👉 {
  position: absolute;
  width: 80%;
  height: 35px;
  background-color: var(--skin-color);
  bottom: 32%;
  right: 64%;
  transform-origin: 100% 20px;
  animation-duration: calc(var(--tap-speed) * 2);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform: rotate(10deg);
}
.👉:before {
  content: '';
  position: absolute;
  width: 140%;
  height: 30px;
  background-color: var(--skin-color);
  bottom: 8%;
  right: 65%;
  transform-origin: calc(100% - 20px) 20px;
  transform: rotate(-60deg);
  border-radius: 20px;
}
.👉:nth-child(1) {
  animation-delay: 0;
  filter: brightness(70%);
  animation-name: tap-upper-1;
}
.👉:nth-child(2) {
  animation-delay: var(--tap-stagger);
  filter: brightness(80%);
  animation-name: tap-upper-2;
}
.👉:nth-child(3) {
  animation-delay: calc(var(--tap-stagger) * 2);
  filter: brightness(90%);
  animation-name: tap-upper-3;
}
.👉:nth-child(4) {
  animation-delay: calc(var(--tap-stagger) * 3);
  filter: brightness(100%);
  animation-name: tap-upper-4;
}
@keyframes tap-upper-1 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.4);
  }
  40% {
    transform: rotate(50deg) scale(0.4);
  }
}
@keyframes tap-upper-2 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.6);
  }
  40% {
    transform: rotate(50deg) scale(0.6);
  }
}
@keyframes tap-upper-3 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(0.8);
  }
  40% {
    transform: rotate(50deg) scale(0.8);
  }
}
@keyframes tap-upper-4 {
  0%, 50%, 100% {
    transform: rotate(10deg) scale(1);
  }
  40% {
    transform: rotate(50deg) scale(1);
  }
}

.🤚 选择器：
–skin-color: #E4C560;：定义了一个名为 “–skin-color” 的自定义属性，值为十六进制颜色代码 #E4C560，可能用于表示某种肤色。
–tap-speed: 0.6s; 和 --tap-stagger: 0.1s;：分别定义了动画执行的时间和延迟时间的自定义属性。
position: relative;：设置父容器为相对定位，以便子元素可以相对于它进行定位。
width: 80px; height: 60px;：设置父容器的宽度为 80 像素，高度为 60 像素。
margin-left: 80px;：为父容器设置左边距为 80 像素。
:before 伪元素：在父容器前面插入一个内容为空的块级元素，设置其宽度为父容器宽度的 180%，高度为父容器高度的 75%，绝对定位在父容器的下方且靠右，背景颜色为黑色，带有圆角和模糊效果，透明度为 0.3。
.🌴 选择器：
display: block;：将元素显示为块级元素。
width: 100%; height: 100%;：使这个元素占据父容器的全部宽度和高度。
position: absolute; top: 0; left: 0;：绝对定位在父容器的左上角。
background-color: var(–skin-color);：使用自定义属性 “–skin-color” 设置背景颜色。
border-radius: 10px 40px;：设置元素的圆角。
.👍 选择器：
position: absolute;：绝对定位。
width: 120%; height: 38px;：设置宽度为父容器宽度的 120%，高度为 38 像素。
background-color: var(–skin-color);：使用自定义属性 “–skin-color” 设置背景颜色。
bottom: -18%; right: 1%;：定位在父容器的下方偏右。
transform-origin: calc(100% - 20px) 20px;：设置旋转的中心点。
transform: rotate(-20deg);：将元素逆时针旋转 20 度。
border-radius: 30px 20px 20px 10px;：设置圆角。
border-bottom: 2px solid rgba(0, 0, 0, 0.1); 和 border-left: 2px solid rgba(0, 0, 0, 0.1);：设置底部和左边的边框。
:after 伪元素：在元素后面插入一个内容为空的块级元素，设置其宽度为父容器宽度的 20%，高度为父容器高度的 60%，绝对定位在元素内部的下方偏左，背景颜色带有一定透明度，设置圆角和右边框。
.👉 选择器：
position: absolute;：绝对定位。
width: 80%; height: 35px;：设置宽度为父容器宽度的 80%，高度为 35 像素。
background-color: var(–skin-color);：使用自定义属性 “–skin-color” 设置背景颜色。
bottom: 32%; right: 64%;：定位在父容器的下方偏右。
transform-origin: 100% 20px;：设置旋转的中心点。
animation-duration: calc(var(–tap-speed) * 2);：使用自定义属性设置动画持续时间。
animation-timing-function: ease-in-out;：设置动画的缓动函数。
animation-iteration-count: infinite;：设置动画无限循环播放。
transform: rotate(10deg);：将元素顺时针旋转 10 度。
:before 伪元素：在元素前面插入一个内容为空的块级元素，设置其宽度为父容器宽度的 140%，高度为 30 像素，绝对定位在元素内部的下方偏右，背景颜色与元素相同，设置旋转的中心点，旋转角度为 -60 度，带有圆角。
.👉:nth-child(1)、.👉:nth-child(2)、.👉:nth-child(3)、.👉:nth-child(4) 选择器：
分别为四个类名为 “👉” 的子元素设置不同的动画延迟时间和亮度滤镜效果，通过 animation-name 属性分别调用不同的动画名称。
@keyframes tap-upper-1、@keyframes tap-upper-2、@keyframes tap-upper-3、@keyframes tap-upper-4 动画关键帧：
这些动画关键帧定义了四个类似的动画效果，在 0%、50% 和 100% 时元素旋转一定角度并进行缩放，在 40% 时元素旋转角度更大并保持相同的缩放比例。不同的动画关键帧之间的区别在于缩放比例不同。