<!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. [LeetCode]Combination Sum题解(DFS)

    Combination Sum Given a set of candidate numbers (C) (without duplicates) and a target number (T), f ...

  2. HDU 2041--超级楼梯(递推求解)

    Description 有一楼梯共M级,刚开始时你在第一级,若每次只能跨上一级或二级,要走上第M级,共有多少种走法?   Input 输入数据首先包含一个整数N,表示测试实例的个数,然后是N行数据,每 ...

  3. 浅谈ul布局以及table布局

    我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...

  4. div实现水平和垂直都居中的三个超实用的方法

    本文仅仅介绍作者认为的三种不错的方式, 方式一:transform: translate(-50%,-50%)  示例代码如下: .div{ position: absolute; top: 50%; ...

  5. Qt获取控件位置，坐标总结

    总结的结果是: QMouseEvent中两类坐标系统,一类是窗口坐标,一类是显示器坐标.   总结一:经过试验,QMouseEvent::globalPos()  和 QCursor::pos()效果 ...

  6. flask请求流程

  7. 立即抢注我的免费1T云空间

    立即抢注我的免费1T云空间 在IDC行业中,有许多的免费空间,而真正的免费空间又能有多少?我是一个草根站长,说实话,为了寻找一个很好的免费空间,我在网上找了好多,几乎所有的免费空间都用过,但当网站运行 ...

  8. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/JJ]]

    1. 如果webapps下有同名的文件,会出现以上错误: 2.解决办法: 查看项目的目录结构是否正确,对于servlet项目,WEB-INF下应该有一个classes目录,存放编译好的.class文件 ...

  9. yum 安装LAMP

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  10. SQL Server ->> MSDB.DBO.AGENT_DATETIME函数从整型转时间日期格式

    SELECT MSDB.DBO.AGENT_DATETIME(20170101,0), CAST(CAST(20170101 AS NVARCHAR(50)) AS DATETIME) 返回 2017 ...