CSS动画（吃豆人）

写代码的大学生

于 2024-06-05 16:54:28 发布

阅读量713

点赞数 26

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139476739

版权

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa6kTVaE9AT6qAHuvgRUMyNqNtgalYdG90a4DkbS1lCQ43mUuuQEQlAKT2vz2zI0rQdagx05lvQJbQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=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);  
    }  
}