css3-11 如何实现2D动画
css3-11 如何实现2D动画
一、总结
一句话总结：就是transform属性，属性值为1.translate() 2.rotate() 3.scale()，而这是哪个属性值是带参数的。
1、transform：translate和相对定位relative的不同？
没旋转的时候是一模一样，都是占据文档流，然后移动
但是，一旦旋转，transform：translate是以图片旋转后为直接坐标系来动，
而相对定位relative还是以浏览器窗口做移动的直角坐标系
2、图片旋转后，关于图片的位移操作的直接坐标系还是浏览器窗口么？
不是
旋转发生，图片的坐标轴不认浏览器，只认图片的
3、如何实现图片对角线移动（或朝某个角度移动）？
旋转，然后移动（translate）
4、动画的关键词是什么，属性值中的移动和旋转的关键词又是什么？
transform
1.translate()
2.rotate()
3.scale()
5、如何实现元素的移动或者旋转？
2 transform:translate(300px,300px);
16 transform:rotate(20deg);
6、如何让超出div的图片隐藏？
17 overflow:hidden;
7、二维动画的属性值（平移和旋转）的移动参数分别是什么？
用脑子想，而不是用脑子记
2 transform:translate(300px,300px);
16 transform:rotate(20deg);
8、jquery中如何设置定时事件？
和在js一样
setInterval一个参数是匿名函数，一个参数是时间
33 setInterval(function(){
34 s+=v; 35 obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'}); 36 },10);
二、如何实现2D动画
1、相关知识
1.translate()
2.rotate()
3.scale()
2、代码
translate相对移动
1 div{
2 transform:translate(300px,300px);
3 }translate和rotate实现2D旋转
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 font-family: 微软雅黑;
9 margin:0px;
10 }
11
12 div{13 width:256px;
14 height:256px;
15 background: #ccc;
16 transform:rotate(20deg);
17 overflow:hidden;
18 }
19
20 </style>
21 <script src='jquery.min.js'></script>
22 </head>
23 <body>
24 <div>
25 <img src="dog.png" alt="">
26 </div>
27 </body>
28 <script>
29 $('div').click(function(){
30 s=0;
31 v=10;
32 obj=$(this);
33 setInterval(function(){
34 s+=v;
35 obj.css({'transform':'rotate(20deg) translate('+s+'px,0px)'});
36 },10);
37 });
38 </script>
39 </html>rotate实现2D自动旋转
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 font-family: 微软雅黑;
9 margin:0px;
10 }
11
12 div{13 width:256px;
14 height:256px;
15 background: #ccc;
16 overflow:hidden;
17 border-radius:256px;
18 }
19
20 </style>
21 <script src='jquery.min.js'></script>
22 </head>
23 <body>
24 <div>
25 <img src="dog.png" alt="">
26 </div>
27 </body>
28 <script>
29 $('div').click(function(){
30 s=0;
31 v=-10;
32 obj=$(this);
33 setInterval(function(){
34 s+=v;
35 obj.css({'transform':'rotate('+s+'deg)'});
36 },10);
37 });
38 </script>
39 </html>css3-11 如何实现2D动画相关推荐
- CSS3的2D动画属性
文章目录 前言 一.2D转换 二.2D动画的基本使用方法 三.2D动画属性 1.常见属性 2.速度曲线属性 3.动画简写属性 四.2D动画的具体实现 1.奔跑熊 2.盒子进圈 前言 动画是css中具有 ...
- 【CSS3初探之变形与动画】令人惊叹的CSS3
前言 这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦! 若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想 ...
- 刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画
市面上大多数的热点地图,都是以 JavaScript 来做的,但是使用 CSS3 制作的热点地图倒还真的挺少见的. 其实 CSS3 的功能也很强大,能帮助我们实现很多用 JavaScript 实现的效 ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- 2d 蓝图_“二渲三”打破传统思维！Netflix冲奥动画会推动2D动画变革吗？
我们看到了Netflix做原创动画的野心,二维动画的高度将被重新定义. 编辑 | Katei Netflix的第一部原创动画电影<克劳斯:圣诞节的秘密>将冲击奥斯卡最佳动画长片!这也是Ne ...
- CSS3变形、渐变、动画的基本使用
目录 CSS3 变形 2D转换 3D转换 CSS3颜色渐变 CSS3动画 transition过渡 animation动画 案例1:旋转的风车 案例2:摇晃的桃子 案例3:3D开门动画 总结 CSS3 ...
- 怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
- c语言实现图片过渡效果飞入,用css3实现转换过渡和动画效果
为什么要用css动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画. 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在 ...
- html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
最新文章
- 熟悉常用的HBase操作
- 背景建模--Vibe 算法改进
- 分布式监控系统开发【day38】:监控数据如何画图（九）
- ganglia+nagiosrhel6.5
- POJ 3268 Silver Cow Party
- 逆向调试完成端口回包实践总结
- 就业信息网进行服务器维护,服务器安全武汉大学黄石理工学院就业信息网.pptx...
- java使用itext将图片放到pdf模板的指定位置
- python旋转坐标系_python实现一个点绕另一个点旋转后的坐标
- c语言能选无,【提问】求助，一个C语言选择执行题怎么都不能完美运行
- ASP.NET Session的七点认识
- windows10下安装tensorflow(gpu版本)
- bootstrap 页面垂直居中_前端布局之——水平垂直居中
- uniapp 引入外部链接js
- web前端30个项目列表，学完即可上手做项目
- 人脉就是钱脉，培养人脉的106个技巧
- 用C 绘制实时曲线图
- SQL 语句集合(行转列，参数化...)
- 汇编语言 标志位介绍
- FOC项目知识点总结四 | 从 PWM 到 SVPWM