这个 HTML 文件通过 CSS 动画和伪元素，创建了一个简单的动画效果的机器人头像，包括眨眼、嘴巴动和头部左右晃动的效果。
大家复制代码时，可能会因格式转换出现错乱，导致样式失效。建议先少量复制代码进行测试，若未能解决问题，私信回复源码两字，我会发送完整的压缩包给你。
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>公众号：前端Hardy</title>
<style>
:root {
--surface: #111;
--c: white;
--c2: #9ae3dc;
--c3: magenta;
}
.ai-bot {
scale: 4.2;
width: 34px;
aspect-ratio: 1;
position: relative;
display: grid;
place-items: center;
animation: move-head 4.2s linear infinite;
}
.ai-bot .head {
background: linear-gradient(var(--c) 80%, color-mix(in srgb, var(--c), black 30%), var(--c));
border-radius: .375rem;
position: absolute;
width: 28px;
height: 20px;
}
.ai-bot .head:before,
.ai-bot .head:after {
content: '';
position: absolute;
left: -4px;
top: 6px;
width: 2px;
height: 8px;
background: var(--c, 1);
border-radius: 2px 0 0 2px;
scale: 1 1;
}
.ai-bot .head:after {
right: -4px;
left: unset;
border-radius: 0 2px 2px 0;
}
.ai-bot .face {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
inset: 0 3px;
background: var(--surface);
translate: 0 0;
border-radius: 4px;
padding: 4px 4px 2px 4px;
gap: 3px;
}
.ai-bot .face:before {
content: '';
background: var(--c);
position: absolute;
height: 1px;
width: 10px;
top: -2px;
border-radius: 2px 2px 0 0;
mask: radial-gradient(circle at 50% 100%, transparent 45%, black 45%);
}
.ai-bot .eyes {
display: flex;
height: 8px;
gap: 6px;
animation: blink 2.4s ease infinite;
}
.ai-bot .eyes:before,
.ai-bot .eyes:after {
content: '';
width: 5px;
height: 8px;
scale: 1 1;
filter: drop-shadow(0 0 2px var(--c2));
background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
border-radius: 1px;
translate: 0 0;
}
.ai-bot .eyes:after {
scale: 1 1;
translate: 0 0;
}
.ai-bot .mouth {
width: 10px;
height: 2px;
background: var(--c2);
border-radius: 0 0 1px 1px;
filter: drop-shadow(0 0 2px var(--c2));
scale: 1 1;
animation: mouth 1.2s ease-in infinite;
}
@keyframes blink {
0%,
10%,
100% {
transform: scaleY(1);
}
2% {
transform: scaleY(0.2);
}
8% {
transform: scaleY(0.1);
}
}
@keyframes mouth {
0%,
30%,
70%,
100% {
transform: scaleY(1) scaleX(1);
}
20% {
transform: scaleY(0.5);
}
60% {
transform: scaleX(0.7);
}
}
@keyframes move-head {
0%,
20%,
40%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(20%);
}
30% {
transform: translateX(-20%);
}
}
* {
box-sizing: border-box;
}
body {
display: grid;
place-items: center;
height: 100dvh;
background: var(--surface);
}
</style>
</head>
<body>
<div class="ai-bot">
<div class="head">
<div class="face">
<div class="eyes"> </div>
<div class="mouth"> </div>
</div>
</div>
</div>
</body>
</html>
HTML
- ai-bot：包含整个机器人头像的容器。
- head：表示机器人的头部。
- face：表示机器人的面部。
- eyes：表示机器人的双眼。
- mouth：表示机器人的嘴巴。
CSS
- :root：定义全局 CSS 变量，用于在样式中重复使用颜色值。
- .ai-bot：整个机器人头像的容器。
- .ai-bot .head：机器人的头部。
- .ai-bot .head:before 和 .ai-bot .head:after：表示机器人的左右耳朵。
- .ai-bot .face：机器人的面部。
- .ai-bot .eyes：表示机器人的双眼。
- .ai-bot .eyes:before 和 .ai-bot .eyes:after：表示左右眼睛。
- .ai-bot .mouth：表示机器人的嘴巴。
- @keyframes blink：定义眨眼动画。
- @keyframes mouth：定义嘴巴动的动画。
- @keyframes move-head：定义头部左右晃动的动画。
- *：全局选择器，设置所有元素的 box-sizing 为 border-box，确保宽度和高度包括内边距和边框。
- body：设置页面的布局和背景。
各位互联网搭子，要是这篇文章成功引起了你的注意，别犹豫，关注、点赞、评论、分享走一波，让我们把这份默契延续下去，一起在知识的海洋里乘风破浪！
