zoukankan      html  css  js  c++  java
  • translate动画实例

    <!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>  
  • 相关阅读:
    团 队 作 业 ———— 随 堂 小 测
    Alpha 冲刺 (5/10)
    jquery获取自定义属性(attr和prop)实例介绍
    jQuery中调用WebService方法小结
    ASP.NET程序运行出现WebDev.WebServer40.exe已停止工作解决方法
    Jqurey学习笔记---6、jQuery 效果
    Jqurey学习笔记---5、jQuery 效果
    Jqurey学习笔记---4、jQuery 事件
    Jqurey学习笔记---3、jQuery 选择器
    Jqurey学习笔记---2、jQuery 语法篇
  • 原文地址:https://www.cnblogs.com/gopark/p/9056646.html
Copyright © 2011-2022 走看看