CSS简单实现吃豆人动画

  • 作者:ykk
  • 分类: 随笔
  • 发表时间:2020-05-27 19:56:51
  • 阅读量:(515)

style.css


.background {
  position: relative;
  background: #FFF;
  border-radius: 5px;
  
  width: 200px;
  height: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.background .pacman {
position:absolute;
left:10px;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.background .top {
  top: 25px;
  background: linear-gradient(to bottom, #f4d146 0%, #f4d146 51%, transparent 52%, transparent 100%);
  animation: top .7s linear infinite;
}
.background .left {
  background: linear-gradient(to right, #f4d146 0%, #f4d146 49%, transparent 50%, transparent 100%);
}
.background .bottom {
  background: linear-gradient(to top, #f4d146 0%, #f4d146 49%, transparent 50%, transparent 100%);
  animation: bottom .7s linear infinite;
}

.background .dots {
  position: absolute;
  right: -60px;
  height: 15px;
  width: 250px;
  stroke: #f4d146;
  stroke-width: 15px;
  stroke-dasharray: 0px 50px;
  stroke-linecap: round;
  stroke-dashoffset: 15;
  animation: food .7s linear infinite;
}

@keyframes blink {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-5px, -5px, 0);
  }
}
@keyframes food {
  0% {
    stroke-dashoffset: 15;
  }
  100% {
    stroke-dashoffset: 65;
  }
}
@keyframes top {
  0%, 100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-40deg);
  }
}
@keyframes bottom {
  0%, 100% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(50deg);
  }
}

index.html


<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>100 days CSS #21</title>
  
  
  
      <link rel="stylesheet" href="./style.css">

  
</head>

<body>

  <div class="background">
  <div class="pacman top"></div>
  <div class="pacman left"></div>
  <div class="pacman bottom"></div>
  <svg class="dots">
        <polyline points="0,7 240,7"/>
    </svg>
</div>
  
  

</body>

</html>

 

上一篇: uwsgi + nginx + django 项目部署

下一篇: selenium +pytesseract 验证码识别+web自动化

评论 列表: