zoukankan      html  css  js  c++  java
  • 纯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;
      }
    }
  • 相关阅读:
    10. Regular Expression Matching
    9. Palindrome Number
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
    2. Add Two Numbers
    链式表的按序号查找
    可持久化线段树——区间更新hdu4348
    主席树——树链上第k大spoj COT
  • 原文地址:https://www.cnblogs.com/shendan/p/pac-man.html
Copyright © 2011-2022 走看看