玩命牛的成长记录
登陆
1593次阅读
动画效果的实现

我们来想一想这里面有哪些东西需要动呢？

首先给进度条和积分框来一个渐变，这样他们的入场就不会这么生硬了。

然后是进度条的计时功能，一个颜色的渐变和一个宽度的渐变，这都可以通过animation来实现，这里是通过progress这个keyframes来定义的。在animation里面有一个forwards，这个表示动画完成后停留在最后一帧。

然后就是地鼠们的动画啦，我们可以让我们的地鼠们一直动，反正不到第二场景也看不到，所以我们在地鼠上设置animation-iteration-count: infinite;。我们要为不同的地鼠做不同的动画，所以6个地鼠就要来六个动画，但是其实都是一个原理。

最后给大家看看最终代码和效果：

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <input id="startFlag" type="checkbox">
    <div id="start" class="window">
      <h1>打呀打地鼠</h1>
      <p>不许笑，一个严肃的 CSS 游戏</p>
      <div class="btn-group">
        <div class="susliks"></div>
        <label for="startFlag">开始</label>
      </div>
    </div>
    <div class="time-wrapper">
      <p>游戏时间：</p>
      <div class="time">
        <div class="progress"></div>
      </div>
    </div>
    <div id="map">
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
    </div>
    <div>
      <div class="group">
        <div class="susliks susliks1"></div>
        <div class="hole"></div>
      </div>
      <div class="group">
        <div class="susliks susliks2"></div>
        <div class="hole"></div>
      </div>
      <div class="group">
        <div class="susliks susliks3"></div>
        <div class="hole"></div>
      </div>
      <div class="group">
        <div class="susliks susliks4"></div>
        <div class="hole"></div>
      </div>
      <div class="group">
        <div class="susliks susliks5"></div>
        <div class="hole"></div>
      </div>
      <div class="group">
        <div class="susliks susliks6"></div>
        <div class="hole"></div>
      </div>
    </div>
    <div class="points">
      <div class="point">0</div>
    </div>
  </div>
</body>
check the result

css：

* {
  padding : 0px;
  margin : 0px;
  box-sizing: border-box;
}
.container {
  position : absolute;
  left : 50%;
  top : 50%;
  width : 600px;
  height : 600px;
  margin-left : -300px;
  margin-top : -300px;
  border : 1px solid black;
  overflow : hidden;
  background: -webkit-linear-gradient(top, #8adcf7 0%, #bbe8fd 100%);
  background: linear-gradient(to bottom, #8adcf7 0%, #bbe8fd 100%);
}
.window  {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.window .susliks {
  position: relative;
  top: 6px;
  left: 0;
  margin: 0 auto;
}
.susliks {
  position : absolute;
  top: 70px;
  left: 7px;
  width : 56px;
  height : 100px;
  border-radius : 20px;
  background : #e3c498;
  background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
             -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
             -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%),
             -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
  background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
             radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
             radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%),
             radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.susliks:before, .susliks:after {
  content : '';
  left : -5px;
  top : -5px;
  width : 20px;
  height : 20px;
  position : absolute;
  background : #e3c498;
  border-radius : 50%;
  background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%);
  background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%);
}
.susliks:after {
  left : auto;
  right : -5px;
}
h1, p {
  color: #fff;
  text-align: center;
}
h1 {
  line-height: 50px;
}
.btn-group  {
  margin: 80px auto;
  width: 100px;
  height: 90px;
  overflow: hidden;
  position: relative;
}
.btn-group label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #51a70d;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 4px solid #62b210;
  border-radius: 4px;
}
.hole {
  position : absolute;
  left : 0px;
  top : 70px;
  width : 68px;
  height : 100px;
  background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  border-left : 1px solid #236d22;
  box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.hole:before {
  display : block;
  content : '';
  position : absolute;
  width : 84px;
  height : 24px;
  margin-left : -8px;
  top : -24px;
  background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
                         rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
          -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
                         rgba(255, 255, 255, 0) 6px ),
          -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
                         rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
          linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
                         rgba(255, 255, 255, 0) 6px ),
          linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
}
.time-wrapper  {
  position: absolute;
  left: -150px;
  top: 20px;
  -webkit-transition: 1s;
  transition: 1s;
}
#startFlag:checked ~ .time-wrapper {
  left: 20px;
}
#startFlag:checked ~ .time-wrapper .progress {
  -webkit-animation: progress 15s linear 0s forwards;
  animation: progress 15s linear 0s forwards;
}
@-webkit-keyframes progress {
  from {
    width: 0;
    background: #00ff00;
  }
  to {
    width: 136px;
    background: #ff0000;
  }
}
@keyframes progress {
  from {
    width: 0;
    background: #00ff00;
  }
  to {
    width: 136px;
    background: #ff0000;
  }
}
.time-wrapper p {
  color: #fff;
  line-height: 24px;
}
.time {
  border: 2px solid #fff;
  width: 140px;
  height: 20px;
}
.time .progress {
  height: 16px;
  width: 0;
}
#map {
  position: absolute;
  bottom: 0;
  left: -600px;
  width: 1800px;
  height: 800px;
  -webkit-transform: perspective(600px) rotateX(45deg);
  transform: perspective(600px) rotateX(45deg);
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
.map  {
  width: 5%;
  height: 100%;
  float: left;
}
.map:nth-child(2n) {
  background: #62b210;
}
.map:nth-child(2n+1) {
  background: #51a70d;
}
.group {
  position: absolute;
  width : 68px;
}
.group:nth-child(1) {
  left: 45px;
  top: 210px;
}
.group:nth-child(2) {
  left: 165px;
  top: 270px;
}
.group:nth-child(3) {
  left: 345px;
  top: 250px;
}
.group:nth-child(4) {
  left: 80px;
  top: 370px;
}
.group:nth-child(5) {
  left: 400px;
  top: 410px;
}
.group:nth-child(6)  {
  left: 470px;
  top: 230px;
}
.points {
  position: absolute;
  top: -100px;
  left: 50%;
  width: 100px;
  height: 48px;
  margin-left: -50px;
  background: rgba(0, 0, 0, 0.2);
  border: 4px solid #ffffff;
  border-radius: 4px;
  color: #fff;
  -webkit-transition: top 1s;
  transition: top 1s;
}
#startFlag:checked ~ .points {
  top: 20px;
}
.point {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  cursor: default;
}
#startFlag  {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 999;
}
#startFlag:checked + #start {
  opacity: 0;
  pointer-events: none;
  -webkit-pointer-events: none;
}
.susliks1 {
  -webkit-animation-name: susliks1;
  animation-name: susliks1;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks1 {
  0% {
    top: 70px;
  }
  10% {
    top: 0;
  }
  15% {
    top: 0;
  }
  20% {
    top: 70px;
  }
  100% {
    top: 70px;
  }
}
@keyframes susliks1 {
  0% {
    top: 70px;
  }
  10% {
    top: 0;
  }
  15% {
    top: 0;
  }
  20% {
    top: 70px;
  }
  100% {
    top: 70px;
  }
}
.susliks2 {
  -webkit-animation-name: susliks2;
  animation-name: susliks2;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks2 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 0;
  }
}
@keyframes susliks2 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 0;
  }
}
.susliks3 {
  -webkit-animation-name: susliks3;
  animation-name: susliks3;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}
@-webkit-keyframes susliks3 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
@keyframes susliks3 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
.susliks4 {
  -webkit-animation-name: susliks4;
  animation-name: susliks4;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}
@-webkit-keyframes susliks4 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  15% {
    top: 0;
  }
  30% {
    top: 70px;
  }
}
@keyframes susliks4 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  15% {
    top: 0;
  }
  30% {
    top: 70px;
  }
}
.susliks5 {
  -webkit-animation-name: susliks5;
  animation-name: susliks5;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks5 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  80% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
@keyframes susliks5 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  80% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
.susliks6 {
  -webkit-animation-name: susliks6;
  animation-name: susliks6;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
@-webkit-keyframes susliks6 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  90% {
    top: 0;
  }
  100% {
    top: 70px;
  }
}
@keyframes susliks6 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  90% {
    top: 0;
  }
  100% {
    top: 70px;
  }
}
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点，不要超过100元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1