<!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. jdk锁相关

    锁类型 可重入锁:在执行对象中所有同步方法不用再次获得锁 可中断锁:在等待获取锁过程中可中断 公平锁: 按等待获取锁的线程的等待时间进行获取,等待时间长的具有优先获取锁权利 读写锁:对资源读取和写入的 ...

  2. IDEA 2017.2.2 环境下使用JUnit

    JUnit:单元测试框架,测试对象为一个类中的方法. JUnit不是Javase的一部分,想要使用需要导入jar包,在IntelliJ IDEA 中自带JUnit插件. JUnit 版本有3.X 4. ...

  3. 13 Reasons Why You Should Pay Attention to Mobile Web Performance

    Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at lea ...

  4. ArcGIS 地类净面积计算工具

    地类净面积计算工具可以自己定义图层.字段.地类代码计算任意图层的椭球面积.线状地物扣除.零星扣除和其他扣除,计算地类净面积计算:可以用于二调数据图斑地类.规划地块和基本农田等等需要计算净面积的都可以. ...

  5. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  6. JS的Event Loop

    JavaScript是单线程的,只有一个执行栈,一次只能做一件事. 在浏览器中,却“好像”可以同时做几件事:点击,发送请求,执行多个函数,解析代码. 这是因为浏览器实现的Event Loop机制. W ...

  7. Scratch www 系统搭建

    原文地址:https://blog.csdn.net/litianquan/article/details/82735809 Scratch www要基于Nodejs的环境才可以运行,我尝试了在Win ...

  8. SQL查询语句执行的逻辑顺序

    一.简介 大家都知道SELECT语句是用来查询数据表中的数据的,构成SELECT语句的还有各种元素(where.from.group by等),不同元素又代表了不同的处理逻辑,那么这些元素在执行查询时 ...

  9. Java BigDecimal初探

    更新时间:2016-03-17 一.引言 <Effactive Java>中有这样的描述:float和double类型的主要设计目标是为了科学计算和工程计算.他们执行二进制浮点运算,这是为 ...

  10. iOS设计模式 - 适配器

    iOS设计模式 - 适配器 效果 说明 1. 为了让客户端尽可能的通用,我们使用适配器模式来隔离客户端与外部参数的联系,只让客户端与适配器通信. 2. 本教程实现了适配器模式的类适配器与对象适配器两种 ...