js实现兔年转圈圈动画示例

目录
  • 引言
  • 动画介绍
    • 1.介绍
    • 2.动画三要素
  • 兔子转圈设计
  • 总结

引言

兔年到了，兔年大吉祥，为了庆祝这份喜庆的兔年，今天我们设计一个兔子转圈圈的动画模拟吧。希望大家可以得到我的祝福和好运哦。。

动画介绍

1.介绍

动画指：自动执行动画的过程，不需要任何介入。（过渡需要用户触发）

2.动画三要素

  • 动画名称
  • 动画定义
  • 动画执行时间

如下是一个动画的执行过程。其宽度和高度同时变大

```
.box{
    width: 100px;
    height: 100px;
    background: red;
    //要素一：动画名称
    animation-name: test;
    //要素三：动画时间
    animation-duration: 3s;
}
//要素二：动画定义
@keyframes test {
    from{
        width: 100px;
        height: 100px;
    }to{
        width: 300px;
        height: 300px;
    }
}
```

兔子转圈设计

代码效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 200px;
      height: 200px;
      background-image: url(./imgs/1.png);
      background-repeat: no-repeat;
      background-size: cover;
      position: absolute;
      animation: tuzi 4s;
    }
    @keyframes tuzi {
      0%{
        left: 0;
        top: 0;
      }25%{
        left: 300px;
        top: 0;
      }50%{
        left: 300px;
        top: 200px;
      }75%{
        left: 0;
        top: 200px;
      }100%{
        left: 0;
        top: 0;
      }
    }
  </style>
</head>
<body>
  <div class="box">
  </div>
  <script>
  </script>
</body>
</html>

设计思路

首先我们通过动画定义了兔子的旋转的四个方向，然后按照动画的过程严格的执行兔子的路线顺序，通过动画可以发现动画的三要素已经设计完成了，然后我们继续的完成下面的例子设计，首先让兔子再起点位置偏移的向右方平移，然后让兔子再下面的位置向下偏移。

总结

通过js动画的设计，我们实现了如何使用动画完成了兔子转圈的动画的过程，希望大家都可以收获到许多东西哦，新年发大财，行大运哦。

以上就是js实现兔年转圈圈动画示例的详细内容，更多关于js动画兔年转圈圈的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • JS前端可视化canvas动画原理及其推导实现

    目录 前言 动画的本质 动画的实现 动画的推导 小结 前言 到目前为止我们的 fabric.js 雏形已经有了,麻雀虽小五脏俱全,我们不仅能够在画布上自由的添加物体,同时还实现了点选和框选,并且能够对它们做一些变换,不过只有变换这个操作还不够灵活,要是能够让物体动起来就好了,于是就引入了这个章节的主题:动画,以及动画最核心的一个问题,如何保证在不同的电脑上达到同样的动画效果?然后说干就干,立马开撸. 虽然我写的是系列文章,但每个章节单独食用是木问题的,所以,请放心大胆的看

  • JS使用window.requestAnimationFrame()实现逐帧动画

    JS使用window.requestAnimationFrame()实现逐帧动画

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

  • javascript 中动画制作方法 animate()属性

    animate是个非常冷门的方法,以至于百度和手册上都找不到相关的资料.当然通过一个小小的demo,我还是发现了方法的一些属 animate是所有dom元素都有的方法,可以用来最做过度动画,关键帧动画.这个方法可以更方便的让我们制作动 animate共有两个参数 (很可惜似乎没有回调函数,没发现) 关键帧 (参数可以是数组或对象,数组内包裹的也必须是对象)对象里的属性就是css属性和值了 动画属性设置 {参数数字或者对象} 目前发现的属性有以下 : duration: 动画时长 (单位毫秒) i

  • Js实现累加上漂浮动画示例

    目录 前言 小程序示例 分析 前言 之前,看到一个比较有意思的小程序,就是静神木鱼,可以实现在线敲木鱼,自动敲木鱼,手盘佛珠,静心颂钵的 整个小程序功能比较小巧,大道之简,风靡过一阵的,而且赚得盆满钵满的,下面就实现一下这个小程序中敲木鱼的例子的 小程序示例 示例代码如下所示 <template> <div class="leijia-wrap"> <div class="leijia-content"> <h2>静神

  • 如何利用JS实现时间轴动画效果

    如何利用JS实现时间轴动画效果

    目录 css动画 什么是时间轴动画? 动画对象 动画函数 思考 总结 css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { width: 100px; height: 100px; background: red; animation: changeColor 2s; } @keyframes changeColor { 0% {background: red;} 50% {background: yellow;} 100% {

  • 使用JavaScript练习动画最好的方式封面过渡

    目录 引言 标记和样式 html代码 CSS代码 The JavaScript 引言 首先让我们来看一个镜头,这个镜头展示了几个过渡效果,其中之一就是我所说的 "封面过渡",一个黑色的封面以动画形式隐藏了一些内容,然后新的内容在封面上显现出来(其颜色与之前的不同). 我喜欢我们可以在网页中使用大量不同的动画来展示新内容的内容.所以我们今天将在一个简短的教程中看一下他的结构和动画的一些亮点. 我会使用GreenSock的GSAP作为效果的动画库. 标记和样式 我会以下面这个网站来实现这个

  • js实现兔年转圈圈动画示例

    目录 引言 动画介绍 1.介绍 2.动画三要素 兔子转圈设计 总结 引言 兔年到了,兔年大吉祥,为了庆祝这份喜庆的兔年,今天我们设计一个兔子转圈圈的动画模拟吧.希望大家可以得到我的祝福和好运哦.. 动画介绍 1.介绍 动画指:自动执行动画的过程,不需要任何介入.(过渡需要用户触发) 2.动画三要素 动画名称 动画定义 动画执行时间 如下是一个动画的执行过程.其宽度和高度同时变大 ``` .box{ width: 100px; height: 100px; background: red; //要

  • 浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数 注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr

  • JS实现的简单折叠展开动画效果示例

    JS实现的简单折叠展开动画效果示例

    本文实例讲述了JS实现的简单折叠展开动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE = html> <html> <head> <title>www.jb51.net JS折叠展开动画</title> <style> body{ margin: 0px; padding: 0px; } .red{ background-color:red; width:200px; height:200px; position:rel

  • JS实现的小火箭发射动画效果示例

    本文实例讲述了JS实现的小火箭发射动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小火箭发射</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .big

  • vue实现手机号码抽奖上下滚动动画示例

    本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家.具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Document</title> <meta name="viewport" content=

  • vue实现跳转接口push 转场动画示例

    1.index.js 配置子路由children. import Vue from 'vue' import Router from 'vue-router' import SingerDetail from 'components/singer-detail/singer-detail' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/recommend' }, { path: '/s

  • three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src

  • vue.js前端网页弹框异步行为示例分析

    目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情

  • 基于JS实现接粽子小游戏的示例代码

    基于JS实现接粽子小游戏的示例代码

    目录 游戏设计 游戏实现 添加粽子元素 粽子掉落 难度选择 开始游戏 总结 端午节马上就到了,听说你们公司没发粽子大礼包?没关系,这里用 JS 实现了一个简单的接粽子小游戏,能接到多少粽子,完全看你手速,不用担心端午没粽子了. 游戏设计 在游戏屏幕内,会随机的从顶部掉落粽子,通过鼠标移动到粽子上并点击,成功接住粽子,得到积分.在设置面板中,可以设置游戏难度,分为简单.很难.超级难三种等级,不同等级的积分也是不同的,玩家可根据自己的手速进行设置.游戏结束后,可看到自己的成绩.实现出来的效果如下(可

随机推荐