1、效果图
2、代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {position: relative;display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;}.smiley__face {padding: 10px;position: absolute;display: flex;align-items: flex-start;justify-content: center;border: 5px solid #2263b9;border: 5px solid #2a7ede;width: 100px;height: 120px;background: #ffffff;border-radius: 15px;overflow: hidden;}.face {background: #2a7ede;width: 100%;height: 90px;border-radius: 5px;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;overflow: hidden;z-index: 1;}.eyes {display: flex;justify-content: space-between;align-items: center;height: 20px;width: 60%;}.eye {display: block;width: 15px;height: 15px;background: #2c3e50;border-radius: 50px;}.mouth {display: block;width: 32px;height: 20px;background: #2c3e50;border-top-left-radius: 15px;border-top-right-radius: 15px;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;position: relative;overflow: hidden;}.mouth::before {content: "";display: block;width: 20px;height: 10px;background: #e74c3c;border-radius: 50%;position: absolute;left: 50%;bottom: 2px;transform: translateX(-50%);}.field{position: absolute;bottom: 8px;left: 31px;}</style></head><body><div class="container"><div class="smiley__face smiley__face--01"><div class="face"><div class="eyes"><div class="eye eye__left"></div><div class="eye eye__right"></div></div><div class="mouth"></div></div><div class="field">域管理</div></div></div></body></html>
如果觉得《css画一个卡通动画》对你有帮助，请点赞、收藏，并留下你的观点哦！
