纯CSS做一个吃豆人动画

Posted 肆灵

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了纯CSS做一个吃豆人动画相关的知识,希望对你有一定的参考价值。

我们先来看看将要实现的效果:

  

可以单击这个链接打开查看效果和代码:https://codepen.io/sd237720488/pen/LMyNxJ

 

接下来我们来看看怎么实现的,首先它可以分为两个部分,“吃豆人”和“豆子”

首先html部分长这样:

<div class="pac-man">
  //上半圆
  <div class="half">
    <div class="circle"></div>
  </div>
  //下半圆
  <div class="half half-bottom">
    <div class="circle bottom"></div>
  </div>
  //豆子
  <div class="little-circle"></div>
  <div class="little-circle"</div>
  
</div>

 

一、吃豆人部分:

吃豆人由两个半圆组成,先来实现上面的半圆。

首先绘制一个圆

//css部分:
1
.circle{ 2 width:50px; 3 height:50px; 4 border-radius:50%; 5 }

接着将圆截掉一半,构成上面的半圆

.half{
  height:25px;
  width:50px;
  overflow:hidden;    
}

这样一个半圆就形成了,那么如何让半圆动起来呢?这里用到的是animation。

.half{
    animation:rotate 1s ease infinite;
    transform-origin: 50% 100%;
}

@keyframes rotate{
     50%{
        transform:rotate(-45deg);
    }  
     100%{
        transform:rotate(0deg);
    }  
}

下面的圆也差不多是这样实现的。

值得注意的是,下方的圆使用transform:translateY(-50%);将圆向上移动50%,截到的半圆就是下半圆了。

两个圆的transform-origin也是不同的。

另外,动画效果里的-45deg则要变成45deg。

 

二、豆子部分:

 

首先我们来分析一下,豆子们的起始位置和终点应该是一致的,而速度也应该是相同的。也就是说,所有豆子(虽然我这里只有两颗,但是你们也可以酌情增加豆子数量)路程、时间、速度都一样,那不同的是什么呢?是它们的出发时间

在豆子1还未被吃豆人吃到时,豆子2就应该出发了。倘若豆子1的总运动时间为1秒,豆子2的运动时间也应该为1秒,但是,豆子2应该延迟0.5s,在豆子1运动到一半的时候,豆子2出发。这样就可以造成不断有豆子可以吃的假象了((*^__^*) 嘻嘻……

.little-circle:nth-of-type(3) {
  animation: walk-left 1s infinite linear;//这里做的是匀速直线运动
}

.little-circle:nth-of-type(4) {
  animation: walk-left 1s infinite linear 0.5s ;
}

最后呢,再为豆子的透明度设置变化,出发时是透明的,被吃的时候不透明,造成一个由远到近的假象。

@keyframes walk-left{
  0%{
    opacity:0;
  }
  100%{
    left:15px;
    opacity: 1;
  }
}

 

以上是关于纯CSS做一个吃豆人动画的主要内容,如果未能解决你的问题,请参考以下文章

简易加载效果----疯狂吃豆人

做吃豆人所学知识

蓝桥杯省赛真题26Scratch吃豆人 少儿编程scratch蓝桥杯省赛真题讲解

py小游戏系列吃豆人,儿时的回忆

py小游戏系列吃豆人,儿时的回忆

py小游戏系列吃豆人,儿时的回忆