<!doctype html>

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    <meta charset="UTF-8">

    <title>translate</title>

    <style>

        .fangshan {

            margin: 100px auto 0 auto;

            width: 200px;

            height: 600px;

        }

        .box2 {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            border: 1px solid #000;

            position: relative;

        }

        #nob1 {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            background: #000;

            position: absolute;

            left: 38%;

            top: 38%;

            z-index: 3;

        }

        .nob {

            width: 50px;

            height: 100px;

            border-radius: 50%;

            position: absolute;

            top: 0;

            left: 78px;

        }

        #nob2 {

            background: red;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        #nob3 {

            transform: rotate(240deg);

            left: 75px;

            top: 0px;

            background: green;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        #nob4 {

            transform: rotate(120deg);

            left: 75px;

            top: 0px;

            background: blue;

            transform-origin: 50% bottom;

            transition: transform 1s linear;

        }

        .shu {

            width: 20px;

            height: 300px;

            background: #ccc;

            box-shadow: 2px 0 2px 2px #dedede;

            margin-left: 87px;

            position: relative;

        }

        .pan {

            width: 200px;

            height: 50px;

            border-radius: 50%;

            margin-top: -25px;

            background: #ccc;

        }

        .n {

            position: absolute;

            width: 15px;

            height: 15px;

            border-radius: 50%;

            background: #aaa;

            color: #fff;

            left: 2.5px;

            text-align: center;

            cursor: pointer;

        }

        #n1 {

            top: 50px;

        }

        #n2 {

            top: 80px;

        }

        #n3 {

            top: 110px;

        }

        #n4 {

            top: 140px;

        }

    </style>

</head>

<body>

    <div class="fangshan">

        <div class="box2">

            <div id="nob1"></div>

            <div class="nob" id="nob2"></div>

            <div class="nob" id="nob3"></div>

            <div class="nob" id="nob4"></div>

        </div>

        <div class="shu">

            <div class="n" id="n1">1</div>

            <div class="n" id="n2">2</div>

            <div class="n" id="n3">3</div>

            <div class="n" id="n4">关</div>

        </div>

        <div class="pan"></div>

    </div>

<script>

var n1 = document.getElementById("n1");

var n2 = document.getElementById("n2");

var n3 = document.getElementById("n3");

var n4 = document.getElementById("n4");

var i=1;

var interval;

function change3(num){

    nob2.style.transform = "rotate("+i*360+"deg)";

    nob2.style.transition = "transform "+num+"ms linear";

    var num2 = i*360+240;

    nob3.style.transform = "rotate("+num2+"deg)";

    nob3.style.transition = "transform "+num+"ms linear";

    var num3 = i*360+120;

    nob4.style.transform = "rotate("+num3+"deg)";

    nob4.style.transition = "transform "+num+"ms linear";

    i++;

}

n1.onclick=function(){

    clearInterval(interval);

    change3(1000);

    interval = setInterval(function(){

        change3(1000);

    },1000);

};

n2.onclick=function(){

    clearInterval(interval);

    change3(500);

    interval = setInterval(function(){

        change3(500);

    },500);

};

n3.onclick=function(){

    clearInterval(interval);

    change3(200);

    interval = setInterval(function(){

        change3(200);

    },200);

};

n4.onclick=function(){

    clearInterval(interval);

};

</script>

</body>

</html>

translate动画实例的更多相关文章

  1. CSS动画:Transform中使用频繁的scale,rotate,translate动画

    动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...

  2. css3动画实例测试

    1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...

  3. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  4. CSS动画实例：太极图在旋转

    利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图 设页面中有<div ...

  5. CSS动画实例：移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  6. HTML5动画实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  8. Vue 案例 列表动画实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css3 动画实例

    animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...

随机推荐

  1. 项目中遇到的问题——jsp:include

    昨晚记错了,项目中用的是这个<jsp:attribute>,不过没关系,都差不多!原理是传参数 具体用法: 假设有两个tag文件  aaa 和 bbb aaa有两个属性:name  age ...

  2. 【转】老生常谈-从输入url到页面展示到底发生了什么

    今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...

  3. Nodejs + express + ejs

    特性 <% %> 用于控制流 <%= %> 用于转义的输出 (会对数据字符进行转义) // 数据源 // app.js var tem={ title:"我是中间部分 ...

  4. sql With(NoLock),With(ReadPast)

    --------------- create table tmp1 ( id int primary key, name ) ) ----------- insert into tmp1(id,nam ...

  5. 汇编语言程序环境搭建masm+debug64位 win10/7

    介绍:MASM是Microsoft Macro Assembler 的缩写,是微软公司为x86 微处理器家族开发的汇编开发环境,拥有可视化的开发界面,使开发人员不必再使用DOS环境进行汇编的开发,编译 ...

  6. Web Api ——创建WebAPI

    方法在Win10 + VS2017(MVC5)测试通过 1.建立 WebApi项目: 选择菜单 “文件->新建醒目->web ->ASP.NET Web 应用程序” 输入项目名称和位 ...

  7. Java 之字符串（7）

    什么是 Java 中的字符串 在程序开发中字符串无处不在,如用户登陆时输入的用户名.密码等使用的就是字符串.其实,在前面的章节中我们就已经使用了字符串, 例如我们在控制台中输出的 "Hell ...

  8. Java快速入门-05-数组循环条件 实例《延禧攻略》

    <延禧攻略>如此火爆,蹭蹭热度,用 JAVA 最基础的数组,循环,条件,输入/输出,做了一个简单的小游戏,帮助初学者巩固 JAVA 基础,注释非常详细 动态图展示: xuanfei.jav ...

  9. Appium元素定位（uiautomatorviewer）

    一.uiautomatorviewer元素定位 1.adroid-sdk的安装目录tools下有1个自带的工具uiautomatorviewer,打开后,如下所示: 点击后,如图所示: 步骤: a.链 ...

  10. spring boot(4)-html和templates

     静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources ...