网页-前端-练习题：Pac-man

吃豆豆网页小动画练习题

>>Html......

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="和尚" content="Pac-man">
  <title>Pack-mantitle>
  
  <link rel="stylesheet" type="text/css"
        href="css/Pac-man.css">
head>
<body class="Pac_manbgc">

<div class="mouth">
  
  <div class="topmouth">div>
  <div class="buttommouth">div>
div>
body>
html>

>>css......

/*设置背景颜色*/
.Pac_manbgc {
  background-color: #000000;
}

/*吃豆人上半部分css*/
.topmouth {
  margin-left: 200px;
  margin-top: 0;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px dashed yellow;
  /*设置圆角*/
  border-radius: 100px 100px 0 0;
  /*  csss变换 旋转（度数 deg 周期）
    transform: rotate(-30deg);*/
  /*播放动画 动画名称 时间 速度（匀速） 循环*/
  animation: toppac-man 1s linear infinite;
}

/*吃豆人下半部分CSS*/
.buttommouth {
  margin-left: 200px;
  margin-top: 0;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px dashed yellow;
  /*设置圆角*/
  border-radius: 0 0 100px 100px;
  /*  !*css3变换 旋转（角度 deg 周期）*!
    transform: rotate(30deg);*/
  /*播放动画 动画名称 时间 速度（默认匀速） 循环*/
  animation: buttompac-man 1s linear infinite;
}

/*上半部分动画 关键帧设置*/
@keyframes toppac-man {
  /*初始状态关键帧*/
  0% {
    transform: rotate(0deg);
  }
  /*中间状态关键帧*/
  50% {
    transform: rotate(-30deg);
  }
  /*结束状态关键帧*/
  100% {
    transform: rotate(0deg);
  }
}

/*下半部分动画关键帧设置*/
@keyframes buttompac-man {
  /*初始状态关键帧*/
  0% {
    transform: rotate(0deg);
  }
  /*中间状态关键帧*/
  50% {
    transform: rotate(30deg);
  }
  /*结束状态关键帧*/
  100% {
    transform: rotate(0deg);
  }
}

/*pac-man吃的豆豆*/
.mouth {
  width: 200px;
  height: 200px;
  /*background-color: rosybrown;*/
  margin-top: 50px;
  margin-left: 10px;
  border: 0;
  border-radius: 100px 100px;
  /*box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];*/
  /*1*/
  box-shadow: 600px 0 0 -80px yellow,
  500px 0 0 -80px yellow,
  400px 0 0 -80px yellow,
  300px 0 0 -80px yellow;
  /*播放动画*/
  animation: pea 1s linear infinite;
}

@keyframes pea {
  0% {
    box-shadow: 600px 0 0 -80px yellow,
    500px 0 0 -80px yellow,
    400px 0 0 -80px yellow,
    300px 0 0 -80px yellow;
  }
  100% {
    box-shadow: 500px 0 0 -80px yellow,
    400px 0 0 -80px yellow,
    300px 0 0 -80px yellow,
    200px 0 0 -80px yellow;
  }

}

>>:👁👁