进入css3动画世界(一)
其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷。
分类
目前我接触到的css3动画有2类:一种是
transition
的,另一种是@keyframes
的。
两者的区别就是,transition
的动画表达是从一种状态到另一种状态,而@keyframes
更加灵活,一个动画可以在不同进度表现成不同的状态。
当然,如果从操作的对象进行分类(就我目前接触的而言),我想可以分3种,一种是html元素,一种是svg的,还有就是sprites的。
大家可能见过一个css3动画是关于一个会动的大象
大象的身体是由很多个`div`构成的,我们可以给每一个div都加上动画;
另一种是svg
,美工用AI给你做一个图,图内有若干个已经命名的图层,图内的元素相应编好组,输出svg后,拖进编辑器,你就可以看到id名和图层命名相同的标签,看到编组后的<g></g>
标签,这时候你会发现,svg的元素和上面例子的div差不多,而且形状还不用自己想出来,美工已经帮你做好了,剩下来的就是你要给它加动画了;
还有一种sprites
,美工把整个动画都用AE输出了,然后你只需要把动画扔到PS,把全部帧扔在一起做出一个长图,再通过变换background-position
的属性,就可以做出动画效果了。
## 入门
> 最佳的入门选择就是`transition`。
transition意思是过渡,可以理解成从一种状态变成另一种状态。
这些状态包括很多,我自己没整理出来,暂时引用一下别人整理到的Transition 所支持的css属性.
像transition这个属性,我们经常用hover
与它搭配,写好hover前后的变化,加上transition属性就可以让他们过渡了。
效果:
源码:
<div class="shape width">改变宽</div>
<div class="shape height">改变高</div>
<div class="shape bg">改变背景</div>
<div class="shape font">改变字体</div>
<div class="shape bd-r">改变矩形角</div>
<div class="shape translate">平移</div>
<div class="shape shadow">改变阴影</div>
<div class="shape rotate">旋转</div>
<div class="shape scale">缩放</div>
.shape{
width: 100px;
height: 100px;
background: #777;
float: left;
margin-right: 3px;
color: #fff;
line-height: 100px;
text-align: center;
transition: 0.5s;
border: 1px solid #555;
}
.width:hover{
width: 200px;
}
.height:hover{
height: 200px;
}
.bg:hover{
background: #000;
}
.font:hover{
font-size: 20px;
color: yellow;
}
.bd-r:hover{
border-radius: 50px;
}
.translate:hover{
transform: translate(0,20px);
}
.shadow:hover{
box-shadow: 0px 5px 5px #000;
}
.rotate:hover{
transform: rotate(30deg);
}
.scale:hover{
transform: scale(1.5,1.5);
}
进阶
其实也算不上进阶,
@keyframes
这个玩意大家稍微花点时间就能很轻易的学会了。
其实 @keyframes 的效果在特定条件下和 transition 一样,就是只定义了 0%和100% 或者 from和to 状态下的 @keyframes 和 transition 一样。
源码:(这个svg图是我用AI画出来的,感兴趣的可以自己画一个)
#change{
display: block;
height: 100px;
width: 50px;
background: #999;
transition: 0.3s;
}
#shape{
width: 600px;
height: 200px;
margin-left: 50%;
position: relative;
left: -300px;
}
@keyframes rotate{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
.rotate{
/*transition: 0.5s;*/
transform-origin: 30px 30px;
animation: rotate 10s linear infinite;
}
而@keyframes灵活的是,它还能定义中间的状态,可以加个25%,50%,75%……
开篇我就写这些,感兴趣的可以继续看下一篇,以后会更新。
进入css3动画世界(一)的更多相关文章
- 进入css3动画世界(二)
进入css3动画世界(二) 今天主要来讲transition和transform入门,以后会用这两种属性配合做一些动效. 注:本文面向前端css3动画入门人员,我对这个也了解不深,如本文写的有纰漏请指 ...
- 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性
首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- Dom-创建标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序
使用ASP.NET Core MVC 和 Entity Framework Core 开发一个CRUD(增删改查)的应用程序 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻 ...
- Winform DataGridView修改数据源界面不刷新问题
错误描述 对于dataGridView,设置数据源为一个List集合时,修改了List集合以后即使重新设置数据源界面也不会刷新. 注:如果先设置DataSource=null;可以重新加载,但是界面设 ...
- 【ASP.NET MVC】View与Controller之间传递数据
1 概述 本篇文章主要从操作上简要分析Controller<=>View之间相互传值,关于页面之间传值,如果感兴趣,可参考我另外一篇文章ASP.NET 页面之间传值的几种方式 . Co ...
- 二、nginx搭建图片服务器
接上篇:Nginx安装手册 cd /usr/local/nginx/conf/ 配置图片服务器 方法一.在配置文件server{}中location /{} 修改配置: #默认请求 location ...
- NET .NET深入体验和实战精要
在学习.NET之前要充分理解基础,在这里将基础的知识点一一列举. 万丈高楼平地起 1.命名空间 命名空间是一种特殊的分类机制,他将与一个特定功能集有关的所有类型都分到一起,是.避免类名冲突的一种方式 ...
- JVM(二)JVM内存布局
这几天我再次阅读了<深入理解Java虚拟机>之第二章"Java内存区域与内存溢出异常",同时也参考了一些网上的资料,现在把自己的一些认识和体会记录一下. (本文为博主 ...
- 通信原理课程设计Javaswing技术计算出PCM编码——猎八哥FLY
package keshe; import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; ...
- IT经典书籍——Head First系列【推荐】
Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为"深入浅出",它强调以特殊的方式排版,由大量的图片和有趣的内容组合构成,而达到非疲劳的 ...
- 五个数据段之代码段、数据段、BSS、栈、堆
继上文讲完了对内存管理的一些知识,下面笔者再对上篇文章的内容加以拓展,那么我们今天就来说一说5个数据段 五个数据段 进程(执行的程序)会占用一定数量的内存,它或是用来存放磁盘载入的程序代码,或是存放取 ...