美文网首页
h5农场-浇水、施肥、除草、捉虫CSS动画

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

作者: 小小_128 | 来源:发表于2021-07-27 14:46 被阅读0次

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


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年的存货，代码冗长，参考就好~ 自己动手优化吧！

相关文章

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

    先给大家看一下做好的效果图录屏放不上来 只好看静态效果图喽 我们先来分析捋一遍逻辑与思路：(1) 进入农场后是否购...

  • 种棉与棉被

    岳父在京兆农村洼子里住了十来亩棉花，芒种直抵霜降，下种，浇水，施肥，除草，捉虫，采摘，晒场，入仓库，真真没有...

  • 女人被忽略的久了，绕不开这三种结局，第三种很少见

    点击右上角关注我，为您带来情感解惑 ​ 女人如花，每一朵开的娇艳的花，都需要认真的施肥、浇水、除草、捉虫。一旦疏于...

  • 2022-09-01

    说起养闺女，有人说养闺女就得富养，就像养一盆花，平时，小心翼翼地养育，浇水施肥除草捉虫，费尽心思。 直到有一天花儿...

  • 2018-02-02

    我们在春天播下种子 好好浇水，施肥，捉虫 让阳光一点一点...

  • 给我一个支点，可以翘起一个地球！

    伸手，紧握，起跳，飞升！ 耕耘，施肥，除草，浇水。 吸收，呐喊，腾越，生长！ 收获，回报，惊喜，...

  • 长沙庭院私家花园植物养护四季注意事项|植来植趣

    花园养护有浇水、施肥、防治病虫害、中耕除草、修剪、开沟排水、抗寒抗旱等工作，现在就浇水、施肥、防治病虫三件主要养护...

  • 喜获丰收

    荆棘丛中开荒地， 播下种子一粒粒。 除草浇水又施肥， 硕果累累甜如蜜。

  • 浇水施肥

    明知这个假期会迎来报复性旅游，自己仍然选择再去添一份堵。虽然全程极度消耗体力，过后从小朋友脸上洋溢出灿烂的笑容来说...

  • 送您一朵玫瑰花

    送您一朵玫瑰花，请您好好爱护她。浇水除草施肥料，花香伴您前行啦。

网友评论

      本文标题：h5农场-浇水、施肥、除草、捉虫CSS动画

      本文链接：https://www.haomeiwen.com/subject/hqtywctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|h5农场-浇水、施肥、除草、捉虫CSS动画|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！