用css画贪吃豆

1、效果图

2、实现过程

通过观察我们把图形分为贪吃先生和豆子小姐。

1. 先说豆子小姐

它们是两个尺寸为10px的带动画的红色小正方形。实现方式简单这里不予赘述，动画方式初始时透明度为1，结束时是0；并且发生了横向位移。计算好尺寸我们直接上代码。

//豆子小姐的html
<div class="little-circle"></div>
<div class="little-circle"></div>
//豆子小姐的样式Css
 .little-circle {width: 10px;height: 10px;background-color: #e73068;position: absolute;top: 100px;left: 245px;}
 .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: 1;left: 215px;}
    100% {left: 100px;opacity: 0;}
}*

2. 再说豆子先生

重头戏来了，豆子先生可是当仁不让的主角！那么如何实现呢？

像往常一样，我们先把动画去掉。通过观察我们发现这是一个缺了1/4角的圆形。我们继续秉着化繁成简的原则。设置或去掉圆形的border-radius。让它变成矩形！于是我们得到了如下图形：

如何画缺角的矩形呢？想必大家会用css画三角形吧，这里有异曲同工之妙。

css做三角形的方法：首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。css做三角形的方法：首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。css做三角形的方法：首先创建一个div元素，设置div的width和height为0，只用边框宽来填充，边框样式设置为实线“solid”；然后顶部边框设置颜色，剩下的三个边框的颜色设置为透明“transparent”值即可。

浅浅地画一个三角形：

//html
<div class="triangle-down"></div>
//css
.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid blue
}

三角形画出来了，缺角的矩形也就呼之欲出了，缺角的圆形也不在话下。

//html
<div class="pacman"></div>
//css
 .pacman {    
    width: 0px;
    height: 0px;
    top: 50px;
    left: 30px;
    border-right: 50px solid transparent;
    border-top: 50px solid #e73068;
    border-left: 50px solid #e73068;
    border-bottom: 50px solid #e73068;
    border-radius: 50%;
}

3. 最后实现张口闭口效果

圆形最接近张口闭口的效果是旋转啊：transform:rotate(deg);

一个缺角的圆形显然实现不了开合的效果！那么两个怎么样？灵光乍现，我们画两个一模一样的缺角圆形，一个顺时针旋转一个逆时针旋转会发生什么样的效果呢？

果然，开口闭口的豆子先生出现了。

//两片相同的缺角圆形
<div class="pacman one"></div>
<div class="pacman two"></div>
//一个顺时针旋转 一个逆时针旋转
.pacman.one {animation: rotate_up 2.5s infinite; }
.pacman.two {animation: rotate_down 2.5s infinite; }
 @keyframes rotate_up {
    0% {transform: rotate(-90deg);}
    50% {transform: rotate(0deg);}
    100% {transform: rotate(-90deg);}
}
@keyframes rotate_down {
    0% {transform: rotate(90deg);}
    50% {transform: rotate(0deg);}
    100% {transform: rotate(90deg);}
}

3、总结

我们要有一双善于发现的眼睛，学会把复杂的东西简单化，这样遇到问题就会迎刃而解可~

边学习边整理，如有问题欢迎指正，大家一起加油！侵删~