js实现旋转大风车

相信大家都对风车这个东西感到不陌生，所以我们今天就要写一个大风车的案例.

这是一个动态网页，下面是css文件的代码，废话少说，上代码：

<style>
        .fc{
            animation:wm 2s infinite linear;
        }
        @keyframes wm {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(-360deg);
            }
        }

        .rfc{
            animation:wm1 2s infinite linear;
        }
        @keyframes wm1 {
            from {
                transform:rotate(0deg);
            }
            to {
                transform:rotate(360deg);
            }
        }
</style>

接下来是js的文件

<body>
<div>
    <h3>我爱玩风车</h3>
    <img src="../img/logo.png" class="" alt="" id="img1">
    <hr>
    <input type="button" value="开始" onclick="start1()">
    <input type="button" value="停止" onclick="stop1()">
    <input type="button" value="反转" onclick="reverse()">
    <input type="button" value="转1圈" onclick="circle(1)">
    转<input type="text" size="1" value="" onblur="circle(this.value)">圈

</div>
</body>
<script>
    function circle(n){
        //处于停止状态
        if(img1.className==''){
            start1()
        }
        //已经在转了
        setTimeout(stop1,2000*n)

    }

    //反转
    function reverse(){
        img1.className='rfc'
    }

    //转起来
    function start1() {
        img1.className='fc'
    }
    //停下来
    function stop1() {
        img1.className=''
    }

</script>

查看成品：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS使用canvas绘制旋转风车动画

    JS使用canvas绘制旋转风车动画

    使用canvas绘制动画-旋转风车加速减速启动停止. 结果截图详见如下: 源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JS实现玩转风车

    JS实现玩转风车

    本文实例为大家分享了JS实现玩转风车的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>找风车</title>     <style>         #div1{             width: 800px;             h

  • js实现旋转大风车

    js实现旋转大风车

    相信大家都对风车这个东西感到不陌生,所以我们今天就要写一个大风车的案例. 这是一个动态网页,下面是css文件的代码,废话少说,上代码: <style>         .fc{             animation:wm 2s infinite linear;         }         @keyframes wm {             from {                 transform:rotate(0deg);             }        

  • js实现旋转的星空效果

    js实现旋转的星空效果

    本文实例为大家分享了js实现旋转的星空效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta nam

  • p5.js绘制旋转的正方形

    使用p5.js绘制旋转的正方形,供大家参考,具体内容如下 要还原的效果图 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们. 首先建立画布大小,按照比例应该是5:3 function setup() { createCanvas(500, 300); } 设定矩形绘制格式,以及边线粗细 function setup() { createCanvas(500, 300); rectMode(100); strokeWeight(4); } 让我们根据画布坐标先把静态的图形画

  • p5.js临摹旋转爱心

    p5.js临摹旋转爱心

    运用p5.js临摹旋转爱心,供大家参考,具体内容如下 原图 我的临摹 效果不错的样子,让我们看看实现过程. 第一步.分析原图GIF 因为原图中旋转速度较快,无法用肉眼直观地找到规律.所以我把gif分解,共90帧,一帧一帧的寻找旋转规律. 从上往下顺序,第一层到第六层.从简单的说起. 第六层:逆时针匀速旋转一圈. 第五层:先逆时针旋转α,速度由v1变为0.再顺时针旋转180°+2α,速度由0变为v2,再变为0.最后逆时针旋转α,速度由0变为v1.(观察原图,我将α设为30°0) 第四层:先逆时针旋

  • HTML中用JS实现旋转的圣诞树

    HTML中用JS实现旋转的圣诞树

    <!DOCTYPE HEML PUBLIC> <html> <head> <meta charset="utf-8"> <title> From ZXW-NUDT </title> <style> body{text-align:center} html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } div

  • Exif.js图片旋转修正的方法

    本文实例为大家分享了Exif.js图片旋转修正的具体方法,供大家参考,具体内容如下 上传后图片旋转修正 测试流程 上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <m

  • 纯JS实现旋转图片3D展示效果

    CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

  • JS实现简单的操作杆旋转示例详解

    目录 一.实现效果 二.组成部分 目标 三.代码实现 1.操作控制 2.dom对象操作类 3.用法 总结与思考 一.实现效果 JS 简单的操作杆旋转实现 首先说明一下,请直接忽略背景图,这里主要实现的是杆旋转控制方向盘旋转. 鼠标移出控制区域,控制球复位 二.组成部分 创建 ballOption.js 文件,用以绑定控制球指定 dom,并初始化相关操作 创建 eleOption.js 文件,用以实现一些频繁的 dom 操作 主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角

  • Three.js基础部分学习

    Three.js基础部分学习

    一.关于使用Three.js几点理论说明 1.请参考官网地址 https://threejs.org/ 2.使用three.js必备条件  <场景 A scene.相机a camera.渲染器 a renderer  三者缺一不可> To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the

  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    旋转叠加 平移 前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等..最骚的是滑动特效要是一个个旋转叠加.(摔! 当时用的是vue-cli-3 + ant-design-vue实现的页面,发现ant-design-vue里头有现成的Carousel组件可用,由于排期比较急,先暂时用这个实现了第一版,没有特效没有其他花里胡哨的展示.验收完第一版后,发现ant-de

随机推荐