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 ...
随机推荐
- 项目中遇到的问题——jsp:include
昨晚记错了,项目中用的是这个<jsp:attribute>,不过没关系,都差不多!原理是传参数 具体用法: 假设有两个tag文件 aaa 和 bbb aaa有两个属性:name age ...
- 【转】老生常谈-从输入url到页面展示到底发生了什么
今天看到了一篇很详细地解释了从输入url到页面展示过程的文章,好文章不能错过,所以转到自己这里来了. 原文地址:老生常谈-从输入url到页面展示到底发生了什么 以下为原文: 刚开始写这篇文章还是挺纠结 ...
- Nodejs + express + ejs
特性 <% %> 用于控制流 <%= %> 用于转义的输出 (会对数据字符进行转义) // 数据源 // app.js var tem={ title:"我是中间部分 ...
- sql With(NoLock),With(ReadPast)
--------------- create table tmp1 ( id int primary key, name ) ) ----------- insert into tmp1(id,nam ...
- 汇编语言程序环境搭建masm+debug64位 win10/7
介绍:MASM是Microsoft Macro Assembler 的缩写,是微软公司为x86 微处理器家族开发的汇编开发环境,拥有可视化的开发界面,使开发人员不必再使用DOS环境进行汇编的开发,编译 ...
- Web Api ——创建WebAPI
方法在Win10 + VS2017(MVC5)测试通过 1.建立 WebApi项目: 选择菜单 “文件->新建醒目->web ->ASP.NET Web 应用程序” 输入项目名称和位 ...
- Java 之字符串(7)
什么是 Java 中的字符串 在程序开发中字符串无处不在,如用户登陆时输入的用户名.密码等使用的就是字符串.其实,在前面的章节中我们就已经使用了字符串, 例如我们在控制台中输出的 "Hell ...
- Java快速入门-05-数组循环条件 实例《延禧攻略》
<延禧攻略>如此火爆,蹭蹭热度,用 JAVA 最基础的数组,循环,条件,输入/输出,做了一个简单的小游戏,帮助初学者巩固 JAVA 基础,注释非常详细 动态图展示: xuanfei.jav ...
- Appium元素定位(uiautomatorviewer)
一.uiautomatorviewer元素定位 1.adroid-sdk的安装目录tools下有1个自带的工具uiautomatorviewer,打开后,如下所示: 点击后,如图所示: 步骤: a.链 ...
- spring boot(4)-html和templates
静态页面 spring boot项目只有src目录,没有webapp目录,会将静态访问(html/图片等)映射到其自动配置的静态目录,如下 /static /public /resources ...