1.整体效果
CSS吃豆人效果是一种将经典游戏元素融入现代网页设计中的有趣尝试。通过CSS的强大动画功能，我们可以在网页上创造出吃豆人游走的动画效果，不仅为用户带来怀旧的乐趣，同时也增加了网页的互动性和趣味性。
2.整体代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>吃豆人</title> <link rel="stylesheet" type="text/css" href="6_5.css"> </head> <body> <div class="pacManBox"> <div class="eye"></div> <div class="mouthOne"></div> <div class="mouthTwo"></div> <div class="beansOne"></div> <div class="beansTwo"></div> </div> </body> </html>
CSS
.pacManBox { display: inline-block; position: relative; margin: 120px; } /* 使用伪元素创建吃豆人的眼睛 */.pacManBox::before { content: ''; width: 0.4em; height: 0.4em; border-radius: 50%; background-color: #333; position: absolute; top: 6px; left: 21px; z-index: 2000; } /* mouthOne搭配mouthTwo组成吃豆人张嘴闭嘴的动画 */.mouthOne { width: 0; height: 0; border: 25px solid #E1B204; border-radius: 50%; border-right-color: transparent; animation: upup .32s 0s infinite; position: relative; z-index: 3; } @keyframes upup { 0% { transform: rotate(270deg); } 50% { transform: rotate(1turn); } 100% { transform: rotate(270deg); } } .mouthTwo { width: 0; height: 0; border: 25px solid #E1B204; border-right-color: transparent; border-radius: 25px; margin-top: -50px; animation: downdown .32s 0s infinite; position: relative; z-index: 3; } @keyframes downdown { 0% { transform: rotate(90deg); } 50% { transform: rotate(0); } 100% { transform: rotate(90deg); } } /* 豆子不断移动 */.beansOne { background-color: #E1B204; border-radius: 50%; width: 10px; height: 10px; position: absolute; transform: translateY(-6px); top: 25px; left: 100px; animation: beanAnimation 1s linear .52s infinite; } .beansTwo { background-color: #E1B204; border-radius: 50%; width: 10px; height: 10px; position: absolute; transform: translateY(-6px); top: 25px; left: 100px; animation: beanAnimation 1s linear 1.1s infinite; } @keyframes beanAnimation { 75% { opacity: .72; } 100% { transform: translate(-100px, -6px); } }
