进入css3动画世界(二)

今天主要来讲transition和transform入门,以后会用这两种属性配合做一些动效。

注:本文面向前端css3动画入门人员,我对这个也了解不深,如本文写的有纰漏请指出,不喜勿喷。

transition属性

从中文翻译来讲,这是一个过渡属性,而这个属性的属性值有四种:

transition: property duration timing-function delay

第一个是起作用的属性名,第二个是动画持续的时间,第三个是速度效果的曲线,第四个是过渡效果延迟多久后开始。

而我经常用的是第二个属性值,其次是速度曲线。

下面我们用hover试下不同的效果:

**源码:**
```html

改变宽度
持续3秒
匀速3秒
延迟1秒

```

.idiv{
float: left;
width: 100px;
height: 100px;
background: green;
margin: 5px;
font-size: 20px;
color: #fff;
line-height: 100px;
text-align: center;
}
#change-width{
transition: width 0.5s;
}
#change-width:hover{
width: 300px;
}
#dur-3s{
transition: 3s;
}
#dur-3s:hover{
width: 300px;
}
#linear{
transition: 0.5s linear;
}
#linear:hover{
width: 300px;
}
#delay-1s{
transition: 0.5s 1s;
}
#delay-1s:hover{
width: 300px;
}

transform属性

transform的意思是变换。

transform的变换很多,我可能没那么深入去学,但是我们可以了解一下基本的几种动画:

translate(),rotate(),scale(),就凭这几种基本的动画加上你的想象力,就可以做出上一篇我们提到那头大象了。当然,这些transform的属性值最后还可以用一个属性值matrix()完成,具体可以去膜拜一下张鑫旭关于matrix()的描述。

我们暂时只讨论2d情况下的transform,当然还有一个skew()我没怎么用过。

translate

translate()是平移,translateX(x)沿着x轴平移,translateY(y)沿着y轴平移,translate(x,y)沿着xy轴同时平移:

```html

div1 x平移
div2 y平移
div3 xy平移

```

.idiv{
float: left;
width: 100px;
height: 100px;
background: green;
margin: 5px;
font-size: 20px;
color: #fff;
line-height: 100px;
text-align: center;
transition: 0.5s;
}
#div1:hover{
transform: translateX(20px);
}
#div2:hover{
transform: translateY(20px);
}
#div3:hover{
transform: translate(20px,20px);
}

rotate

rotate()是旋转,2d的情况下,rotate()只接收一个角度作为参数。

<div class="idiv" id="rotate30">顺时针旋转30°</div>
<div class="idiv" id="rotate60">顺时针旋转60°</div>
<div class="idiv" id="rotate90">顺时针旋转90°</div>
<div class="idiv" id="rotate-30">逆时针旋转30°</div>
<div class="idiv" id="rotate-60">逆时针旋转60°</div>
<div class="idiv" id="rotate-90">逆时针旋转90°</div>
.idiv{
float: left;
width: 100px;
height: 100px;
background: green;
margin: 5px;
font-size: 20px;
color: #fff;
line-height: 50px;
text-align: center;
transition: 0.5s;
}
#rotate30:hover{
transform: rotate(30deg);
}
#rotate60:hover{
transform: rotate(60deg);
}
#rotate90:hover{
transform: rotate(90deg);
}
#rotate-30:hover{
transform: rotate(-30deg);
}
#rotate-60:hover{
transform: rotate(-60deg);
}
#rotate-90:hover{
transform: rotate(-90deg);
}

scale()

scale()是缩放,和translate()一样,接收1-2个参数。scaleX(x),scaleY(y),scale(x,y):

<div class="idiv" id="scalex">x轴放大到1.5倍</div>
<div class="idiv" id="scaley">y轴缩小到0.5倍</div>
<div class="idiv" id="scalexy">xy轴放大到2倍</div>
.idiv{
float: left;
width: 100px;
height: 100px;
background: green;
margin: 5px;
font-size: 20px;
color: #fff;
line-height: 50px;
text-align: center;
transition: 0.5s;
}
#scalex:hover{
transform: scaleX(1.5);
}
#scaley:hover{
transform: scaleY(0.5);
}
#scalexy:hover{
transform: scale(2,2);
}

进入css3动画世界(二)的更多相关文章

  1. 进入css3动画世界(一)

    其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷. 分类 目前我接触到的css3动画有2类:一种是transition的,另一种是@keyframes的. 两者的区别就是 ...

  2. CSS3中的变形与动画(二)

    CSS3动画 过渡属性transiton-property 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可 ...

  3. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  4. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  5. css3动画由浅入深总结

    阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...

  6. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  7. CSS3学习(CSS3过渡、CSS3动画)

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  8. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  9. 如何制作css3的3d动画——以骰子旋转为例,详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

随机推荐

  1. Spring中AOP简介与切面编程的使用

    Spring中AOP简介与使用 什么是AOP? Aspect Oriented Programming(AOP),多译作 "面向切面编程",也就是说,对一段程序,从侧面插入,进行操 ...

  2. 微信小程序实例--仿豆瓣电影

    最近不想写论文,就想捣鼓点新东西吧,就边看官方文档,花了3天时间写了一个简单的仿豆瓣电影的微信小程序,给大家分享一下教程吧. 源码&效果图 源码点击这里,欢迎star 运行方法: 下载微信we ...

  3. js,jQuery实现可关闭悬浮框广告特效,兼容(谷歌,火狐,Ie)

    注意不能直接用close()命名关闭广告函数,避免冲突. javascript实现方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  4. 有哪些关于 Python 的技术博客?

    Python是一种动态解释型的编程语言,它可以在Windows.UNIX.MAC等多种操作系统以及Java..NET开发平台上使用.不过包含的内容很多,加上各种标准库.拓展库,乱花渐欲迷人眼.因此如何 ...

  5. ios 初体验< UISegmentedControl 分段控件>

     小知识:  数组快速创建 @[@"",@"",@"",@"".......],字典快速创建方法:@{@"&q ...

  6. 使用设置sa用户登录sql server2008

    今天在net项目中添加数据库过程中出现了小问题,就是使用sql server身份验证没登录成功,经过一番调试,终于解决问题. 使用sa账户登录sql server 2008 的方法步骤如下: 1.首先 ...

  7. [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

    抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...

  8. angular指令笔记(一):ng-options

    1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng- ...

  9. 防止fixed元素遮挡其他元素的方法

    有多个页面,有的有固定的头部(设置了postion:fixed的元素),有的没有固定的头部,这时就有个问题,有固定头部的页面,头部会遮挡下面的内容,那怎么解决呢? <!DOCTYPE html& ...

  10. 提高SQL执行效率的16种方法

      项目中优化sql语句执行效率的方法:1)尽量选择较小的列2)将where中用的比较频繁的字段建立索引3)select子句中避免使用'*'4)避免在索引列上使用计算.not in 和<> ...