css3人物眨眼

CSS3人物眨眼效果

.eye {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
}
.eye::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    background-color: black;
    border-radius: 50%;
}
.eye::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    animation: blink 3s infinite;
}
@keyframes blink {
50% {
    transform: scale(0.5);
}
}
    

代码解释

首先创建一个眼睛元素，设置其宽高和圆角，背景为白色。再使用伪元素before在眼睛中心创建一个黑色的圆形代表瞳孔。最后使用伪元素after创建一个白色的圆形代表眼珠，并使用CSS3动画使其呈现眨眼效果。

动画设置了3秒一次无限循环，其中50%的关键帧使用了scale属性将眼珠缩小到原来的一半，形成眨眼的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！