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>
translate动画实例的更多相关文章
- CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...
- css3动画实例测试
1.css3动画属性分析(2016-5-11) 1.transition: 规定属性变换规则,可以这样讲.transition(a,b,c,d); a:要变换的属性: b:过渡时间: c:运动方式: ...
- CSS动画实例:Loading加载动画效果(三)
3.小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- CSS动画实例:太极图在旋转
利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1.旋转的太极图 设页面中有<div ...
- CSS动画实例:移动的眼珠子
适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...
- HTML5动画实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS Clip剪切元素动画实例
1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...
- Vue 案例 列表动画实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3 动画实例
animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...
随机推荐
- java中程序上线报错: tomcat中java.lang.OutOfMemoryError: PermGen space
在程序测试没问题之后,上线试运行,在运行的过程中某个功能一点击就报如下错,然后重启服务器就好了,一会又是如此,解决方法如下(亲测) PermGen space的全称是Permanent Generat ...
- UVA1185 Big Number
题目大意:求十进制下x!的位数 这题其实就是要求\(\lg\)函数值的前缀和啊 对于一个数x,若\(\lg x=y\),则其位数为\(\lfloor y+1 \rfloor\) 然后对于对数,我们有\ ...
- BestCoder Round #93
这么快两天就过去了啊……昨天是April Fool’s Day,但绝对是我过的所有April Fool’s Day里最没意思的一个…… 估计再不写就要忘了……还是写写吧= = 说好7:00到机房,然而 ...
- 使用javascript调用android代码
1.使用webview对象的addJavascriptInterface方法 2.addJavascriptInterface方法有两个参数,第一个参数就是我们一般会实现一个自己的类,类里面提供我们要 ...
- dukuwiki简单教程
=====请先阅读下面的说明,有助于你快速入门===== * DokuWiki(也就是我们通常称谓的wiki) 支持一些简单的标记语言, 以尽最大可能使文档看上去更友好. * 你可以把它理解为一种和c ...
- LeetCode 514----Freedom Trail
问题描述 In the video game Fallout 4, the quest "Road to Freedom" requires players to reach a ...
- Mybatis学习第二天——mapper的动态代理
传统的Dao层开发通过接口与实现类的方式,Mybatis中通过mapper动态代理是需要定义接口. 1.传统Dao层封装 那么可以将公共资源提取出来,剩余的封装成方法来实现.下面是UserDaoImp ...
- 解决linux下fflush(stdin)无效
void clean_stdin(void) { int c; do { c = getchar(); } while (c != '\n' && c != EOF); }
- Vue实例对象的数据选项(火柴)
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- Java实例---flappy-bird实例解析
第一天: 实现背景图片和小鸟的动态飞行效果 package com.ftl.flappybird.day2; import java.awt.Color;//颜色 Color.class import ...