h5农场-浇水、施肥、除草、捉虫CSS动画

先给大家看一下做好的效果图录屏放不上来 只好看静态效果图喽

image.png
image.png

我们先来分析捋一遍逻辑与思路：
(1) 进入农场后是否购买地? --- land-未开垦的草皮 empty-land-已购买/其他操作的基底
(2)地当前发展到哪一状态？
land-未开垦的草皮 empty-land-已购买/其他操作的基底 early-种子期 middle-中期 late-成熟期/可采收

image.png

(3)虫子在除草这个步骤后显示

html： main标签包含隐藏的浇水壶、施肥、出彩、捉虫的图片

<div class="container">
  <!-- 地 -->
  <main>
    <!-- 浇水壶 -->
    <div class="bottle" alt="a-watering"></div>
    <!-- 施肥 -->
    <div class="fertilize" alt="a-fertilizing"></div>
    <!-- 除草 -->
    <div class="weed" alt="a-weeding"></div>
    <!-- 捉虫 -->
    <div class="catchInsect" alt="a-catching"></div>
    <!-- 土地 -->
    <div class="main">
        <li id="one">
            <img class="brand" onclick="buy(1)" src="./images/choose.png" alt="">
            <img class="land" src="./images/land.png" alt="">
            <img class="empty_land" style="display: none;" src="./images/empty_land.png" alt="">
            <img class="early" style="display: none;" onclick="landMsg()" src="./images/early.png" alt="">
            <img class="middle" style="display: none;" src="./images/middle.png" alt="">
            <img class="late" style="display: none;" src="./images/late.png" alt="">
            <img class="pest" style="display: none;" src="./images/pest.png" alt="pest">
        </li>
    </div>
  </main>
  <!-- 底部五大功能 -->
  <div class="footer">
    <ul>
        <!-- 种下种子 -->
        <li onclick="plant()">
            <img src="./images/seed.png" alt="">
        </li>
        <li onclick="water('water')">
            <img src="./images/watering.png" alt="">
        </li>
        <li onclick="fertilize('fertilize')">
            <img src="./images/applyFertilizer.png" alt="">
        </li>
        <li onclick="weed('weed')">
            <img src="./images/weed.png" alt="">
        </li>
        <li onclick="catchInsect('catchInsect')">
            <img src="./images/catchInsects.png" alt="">
        </li>
    </ul>
  </div>
  <!-- 买地弹窗 -->
  <div class="buyLand">
      <div class="content">
          <img class="close" onclick="closeBuy()" src="./images/close.png" alt="">
          <h4>提示</h4>
          <p>是否花费10积分解锁该地块？</p>
          <div class="btns">
              <img onclick="closeBuy()" src="./images/cancel_btn.png" alt="">
              <img onclick="submit()" src="./images/submit_btn.png" alt="">
          </div>
      </div>
  </div>
</div>

通过css的动画@-webkit-keyframes实现效果

/* 地 */

main {
    width: 100%;
    height: 158px;
    position: absolute;
    bottom: 12%;
    right: 0;
    display: flex;
    overflow: hidden;
}

/* 1.浇水 */
main .bottle {
    position: absolute;
    top: 0%;
    right: 0;
    width: 72px;
    height: 76px;
    background: url(./images/now_watering.png) no-repeat;
    background-size: 100% 100%;
    display: none;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 999;
}

.bottle-fadeIn {
    -webkit-animation: .8s ease;
    -moz-animation: .8s ease;
    -ms-animation: .8s ease;
    animation: .8s ease;
    -webkit-animation-name: bottleFadeIn;
    -moz-animation-name: bottleFadeIn;
    -ms-animation-name: bottleFadeIn;
    animation-name: bottleFadeIn;
}

/*水瓶动画*/
@-webkit-keyframes bottleFadeIn {
    0% {
        opacity: .8;
        top: 0%;
        right: 0;
        -webkit-transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        top: 4%;
        right: 100px;
        -webkit-transform: rotate(0deg);
    }
}

/* 2.施肥 */
main .fertilize {
    position: absolute;
    top: 0;
    right: 0;
    width: 86px;
    height: 58px;
    background: url(./images/now_applyFertilizer.png) no-repeat;
    background-size: 100% 100%;
    display: none;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 999;
}

.fertilize-fadeIn {
    -webkit-animation: .8s ease;
    -moz-animation: .8s ease;
    -ms-animation: .8s ease;
    animation: .8s ease;
    -webkit-animation-name: fertilizeFadeIn;
    -moz-animation-name: fertilizeFadeIn;
    -ms-animation-name: fertilizeFadeIn;
    animation-name: fertilizeFadeIn;
}

/*施肥动画*/
@-webkit-keyframes fertilizeFadeIn {
    0% {
        opacity: .8;
        top: 0%;
        right: 0;
        -webkit-transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        top: 6%;
        right: 80px;
        -webkit-transform: rotate(0deg);
    }
}

/* 3.除草 */
main .weed {
    position: absolute;
    top: 0%;
    right: 0;
    width: 74px;
    height: 52px;
    background: url(./images/now_weed.png) no-repeat;
    background-size: 100% 100%;
    display: none;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 999;
}

.weed-fadeIn {
    -webkit-animation: .8s ease;
    -moz-animation: .8s ease;
    -ms-animation: .8s ease;
    animation: .8s ease;
    -webkit-animation-name: weedFadeIn;
    -moz-animation-name: weedFadeIn;
    -ms-animation-name: weedFadeIn;
    animation-name: weedFadeIn;
}

/*除草动画*/
@-webkit-keyframes weedFadeIn {
    0% {
        opacity: .8;
        top: 0%;
        right: 0;
        -webkit-transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        top: 6%;
        right: 80px;
        -webkit-transform: rotate(0deg);
    }
}
/* 4.捉虫 */
main .catchInsect {
    position: absolute;
    top: 0%;
    right: 0;
    width: 74px;
    height: 52px;
    background: url(./images/now_catching.png) no-repeat;
    background-size: 100% 100%;
    display: none;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    z-index: 999;
}

.catchinsect-fadeIn {
    -webkit-animation: .8s ease;
    -moz-animation: .8s ease;
    -ms-animation: .8s ease;
    animation: .8s ease;
    -webkit-animation-name: catchinsectFadeIn;
    -moz-animation-name: catchinsectFadeIn;
    -ms-animation-name: catchinsectFadeIn;
    animation-name: catchinsectFadeIn;
}

/*捉虫动画*/
@-webkit-keyframes catchinsectFadeIn {
    0% {
        opacity: .8;
        top: 0%;
        right: 0;
        -webkit-transform: rotate(45deg);
    }
    100% {
        opacity: 1;
        top: 6%;
        right: 80px;
        -webkit-transform: rotate(0deg);
    }
}

js部分：
window.addEventListener('webkitAnimationEnd', function () {},false)
这个函数的目的是：不能同时显示两个动画，必须进行完成一个动画再去进行下一个动画

// 五大功能按钮 能用和禁用
this.able1 = 0;  //0 不能 - 1 能
this.able2 = 0;
this.able3 = 0;
this.able4 = 0;
this.able5 = 0;

// 点击买地-弹窗弹出
function buy(index) {
    var buyLand = document.getElementsByClassName("buyLand")[0];
    buyLand.style.display = "block";
    this.curIndex = index;
}

// 点击取消/× -弹窗关闭
function closeBuy() {
    var buyLand = document.getElementsByClassName("buyLand")[0];
    buyLand.style.display = "none";
}

// 点击确认 - 买地
function submit() {
    // 关闭弹窗
    this.closeBuy();

    // 五大功能可点(只有种植种子后才能浇水、施肥、除草、捉虫)
    this.able1 = 1;

    // 土地变化+买地牌子位移
    var box = document.getElementById("one");
    box.getElementsByClassName("brand")[0].style.display = "none";  //上块地牌子隐藏
    box.getElementsByClassName("empty_land")[0].style.display = "block";//空-土地
    box.getElementsByClassName("land")[0].style.display = "none";
}

// 底部五大功能
// 1.种植种子
function plant() {
    if (this.able1 == 1) {
        var box = document.getElementById("one");
        box.getElementsByClassName("early")[0].style.display = "block";
        this.able1 = 0;
        this.able2 = 1;
        this.able3 = 1;
        this.able4 = 1;
        this.able5 = 1;
    } else { return; }
}

// 2.浇水
function water(action) {
    if (this.able2 == 1) {
        this.action = action;
        document.getElementsByClassName("bottle")[0].style.display = "block";
        document.getElementsByClassName("bottle")[0].classList.add("bottle-fadeIn");
        this.able1 = 0;  //0 不能 - 1 能
        this.able3 = 0;
        this.able4 = 0;
        this.able5 = 0;
    } else { return; }
}

// 3.施肥
function fertilize(action) {
    if (this.able3 == 1) {
        this.action = action;
        document.getElementsByClassName("fertilize")[0].style.display = "block";
        document.getElementsByClassName("fertilize")[0].classList.add("fertilize-fadeIn");
        this.able1 = 0;  //0 不能 - 1 能
        this.able2 = 0;
        this.able4 = 0;
        this.able5 = 0;
    } else { return; }
}

// 4.除草
function weed(action) {
    if (this.able4 == 1) {
        this.action = action;
        document.getElementsByClassName("weed")[0].style.display = "block";
        document.getElementsByClassName("weed")[0].classList.add("weed-fadeIn");
        this.able1 = 0;  //0 不能 - 1 能
        this.able2 = 0;
        this.able3 = 0;
        this.able5 = 0;
    } else { return; }
}

// 5.捉虫
function catchInsect(action) {
    if (this.able5 == 1) {
        this.action = action;
        document.getElementsByClassName("catchInsect")[0].style.display = "block";
        document.getElementsByClassName("catchInsect")[0].classList.add("catchinsect-fadeIn");
        this.able1 = 0;  //0 不能 - 1 能
        this.able2 = 0;
        this.able3 = 0;
        this.able4 = 0;
    } else { return; }
}

// 动画完成--监听事件
window.addEventListener('webkitAnimationEnd', function () {
    console.log('end', this.action);
    if (this.action == 'water') {   // 浇水动画
        console.log('浇水动画完成');
        document.getElementsByClassName("bottle")[0].style.display = "none";
        document.getElementsByClassName("bottle")[0].classList.remove("bottle-fadeIn");
        this.able2 = 1;//0 不能 - 1 能
        this.able3 = 1;
        this.able4 = 1;
        this.able5 = 1;
    } else if (this.action == 'fertilize') {    //施肥动画
        console.log('施肥动画完成');
        document.getElementsByClassName("fertilize")[0].style.display = "none";
        document.getElementsByClassName("fertilize")[0].classList.remove("fertilize-fadeIn");

        document.getElementsByClassName("early")[0].style.display = "none";
        document.getElementsByClassName("middle")[0].style.display = "block";
        document.getElementsByClassName("late")[0].style.display = "none";
        this.able2 = 1;//0 不能 - 1 能
        this.able3 = 1;
        this.able4 = 1;
        this.able5 = 0;
    } else if (this.action == 'weed') {     //除草动画
        console.log('除草动画完成');
        document.getElementsByClassName("weed")[0].style.display = "none";
        document.getElementsByClassName("weed")[0].classList.remove("weed-fadeIn");

        document.getElementsByClassName("early")[0].style.display = "none";
        document.getElementsByClassName("middle")[0].style.display = "none";
        document.getElementsByClassName("late")[0].style.display = "block";

        document.getElementsByClassName("pest")[0].style.display = "block";
        this.able2 = 1; //0 不能 - 1 能
        this.able3 = 0;
        this.able4 = 1;
        this.able5 = 1;
    } else if (this.action == 'catchInsect') {      //捉虫动画
        console.log('捉虫动画完成');
        document.getElementsByClassName("catchInsect")[0].style.display = "none";
        document.getElementsByClassName("catchInsect")[0].classList.remove("catchinsect-fadeIn");

        document.getElementsByClassName("pest")[0].style.display = "none";
        this.able2 = 1; //0 不能 - 1 能
        this.able3 = 0;
        this.able4 = 0;
        this.able5 = 1;
    }
}, false);

这是2020年的存货，代码冗长，参考就好~ 自己动手优化吧！