编写页面

记事本或SublimeText或vscode编写html:

<html>

<div id="box"></div>

<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
} </style> </html>

加上鼠标悬浮的效果:

<html>

<div id="box"></div>

<style>
#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
} /*鼠标悬浮后的样式*/
#box:hover {
/*向下偏移50px*/
top: 50px;
}
</style> </html>

效果图如下:

浏览器只渲染出“box”的初始状态, 和鼠标悬浮后的状态"top: 50px;", 效果较为生硬,可以使用"transition"属性丰富视觉效果。

transition属性

  transition译作“过渡”,在css3中,transition属性用来设置元素过渡效果。

  transition包含4个子属性,分别为:

属性 说明 默认值
property 设置给元素的那个方面添加过渡效果,比如元素的"width"和"height"均发生改变时,可以指定该属性为"width",那么元素的"width"的变动才有过渡效果。"all"表示所有变动都加上过渡效果。 all
duration 设置过渡效果的持续时间,至少要给transition设置这个子属性,否则transition属性就没意义了。 0s
timing-function 过渡函数,该属性决定元素的过渡效果与时间的关系。 ease
delay delay即为“延迟”,表示该元素在加载后多久才开始过渡效果 0s

这几个元素的顺序如下:

transition: property duration timing-function delay;

修改上面的“#box”样式:

#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
/*设置过渡效果 持续1秒,延迟500毫秒才开始*/
transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
/*兼容webkit内核*/
-webkit-transition: 1s 500ms;
}

transition属性加在"#box"元素上,表示该元素变换时按设置的效果进行变换。



修改文件后可以发现过渡效果并没有生效,这是因为"#box"没有设置"top",只是在鼠标悬浮后才出现"top"属性,即解析器没有找到“top”过渡的“初始状态”,“过渡”就应该包含元素的初始状态和最终状态。

给"#box"加上"top: 0;":

#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
/*设置过渡效果 持续1秒,延迟500毫秒才开始*/
transition: 1s 500ms; /*等价于 transition: all 1s ease 500ms */
/*兼容webkit内核*/
-webkit-transition: 1s 500ms;
}

效果如下:

关于timing-function,还可以选择"linear"(线性效果)、"ease-in"(渐进)等,想实现更好玩的效果,可以借助“贝塞尔曲线函数”。

关于transition属性——菜鸟教程传送门

贝塞尔曲线

贝塞尔曲线百度百科

关于贝塞尔曲线,有很多资料,不再赘述。

贝塞尔曲线可视化

这是一个贝塞尔曲线函数可视化的一个网站,用这个网站可以直观地生成合适的动画加速度函数。

  如上是网站的界面,函数的参数分别为坐标系上红球的x轴坐标、y轴坐标和蓝绿球的x轴坐标和y轴坐标。坐标系横轴为时间,纵轴为动画的 progress, 直译过来是进程、进展的意思,映射到平移上就是指移动的点到原点的偏移量。曲线的斜率,反映的是动画的加速度。

  动图中两个方块是自定义动画与线性动画的对比。自定义动画后面具有弹跳的效果,在左上角坐标系上表现为后段往下的凹陷。动画的整体效果是元素离原点的距离越来越远,到后段反而离近一点点,然后又远离,直至到达终点。

选择合适的函数“cubic-bezier(.37,1.44,.57,.77)”设置到"#box"元素中:

#box {
background-color: rgb(246, 96, 78); /*背景色*/
top: 0;
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
}

效果如图:

transform

  以上提及的动画效果都是给元素设置初始状态和最终状态,然后让浏览器自动渲染的,这种叫“补间动画”,即定义初始和结束状态,浏览器自动计算并补充“中间的状态”最后渲染出来,“补间动画”在flash,AE之类的软件都可以看到。

  上面例子是已经知道了"box"的初始状态"top: 0;"了,那万一有的需求是一开始不知道“box”的位置呢,那该如何使得"box"向下移动?那就是"transform"属性的功劳了。

  "transform"就是“改变形态”的意思,就是“汽车人变形”里的“变形”,通过“transform”属性可以改变元素的状态。

  transform包含很多的变换效果,一一介绍。

translate

translate是“转变,转为”的意思,在css3中,translate是transform的子属性,用来平移元素。

translate包含如下几种使用方法:

名称 描述 示例
translateX(x) 表示水平移动,x为负是往左,为正则向右移动 transform: translateX(10px)
transform: translateX(-15%)
translateY(y) 竖直移动,y为负向上,为正向下 同上
translateZ(z) 需配合“perspective()”使用,perspective()用来定义“景深”。z为负时是远离用户(屏幕),正是接近用户 transform: perspective(500px) translateZ(200px)
translate(x, y) 二维平面的移动,是最前面两个的结合 简单
translate(x, y, z) 三维空间的移动,最前面三个的结合 同上

把上面的html改成如下,效果一样:

#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
} /*鼠标悬浮后的样式*/
#box:hover {
/*向下偏移50px*/
transform: translateY(50px);
/*兼容webkit*/
-webkit-transform: translateY(50px);
}

scale

scale就是缩放的意思,对元素进行缩放变换。包含:

  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • scale(x, y)
  • scale3d(x, y, z)

用法与translate一致,只是参数是表示缩放的倍数,“1”表示原来的一倍(不放大不缩小),“0.5”缩小到原来一半,“2”变为原来两倍。

transform: scale(.5);

rotate

旋转变换,包含:

  • rotate(angle): 最简单的旋转变换,angle为负逆时针,为正是顺时针
  • rotateX(angle): 绕着X轴旋转
  • rotateY(angle): 绕Y轴旋转
  • rotaleZ(angle): 绕Z轴旋转
  • rotate3d(x,y,z,angle): 这个复杂一点,是在空间直角坐标系(x,y,z)中选择一个点,然后该点与原点(0,0,0)连成一条线,然后元素绕该线旋转。
    1. rotate3d(1,0,0,180deg)等价于rotateX(180deg)
    2. rotate3d(0,1,0,180deg)等价于rotateY(180deg)
    3. rotate3d(0,0,1,180deg)等价于rotateZ(180deg)
transform: rotate(180deg);

skew

倾斜变换,包含:

  • skewX(angle): 相对X轴倾斜,X轴方向上不变,Y轴旋转angle度。
  • skewY(angle): 相对Y轴倾斜,同上。
  • skew(x-angle, y-angle): 结合起来。

skew不太好理解,结合例子来看:

一、

transform: skewX(45deg);



可以看到“测试字样”在X轴上没有变化,向着Y轴方向旋转45度。

二、

transform: skewY(45deg);



在Y轴方向上没变,"box"的竖边仍与Y轴平行,横边则向着X轴方向旋转45度。

三、

transform: skew(45deg,45deg);

skew不好理解,这里贴出两篇文章:

matrix

矩阵变换,包含:

  • matrix(n,n,n,n,n,n)
  • matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

其它的变换都可以由矩阵变换获得,这是线性代数的知识,学的都还给老师了.......

对CSS3中的transform:Matrix()矩阵的一些理解

perspective

用于定义景深,与上面提到的3d变换配合使用,景深就是元素离眼睛(屏幕)的距离,在电脑上,图形通过变换来让我们眼睛看到的图形产生距离感,大概就是近大远小之类的。

transform: perspective(500px) rotate3d(1, 0, 0, 45deg);

transform-origin

transfor-origin属性用来设置元素变换的基点。默认的,rotate绕元素中点旋转,如果想让元素绕左上角旋转,可以把transform-origin设置为:

transform-orgin: 0% 0%;

示例:

#box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms; /*过渡效果*/
transform-origin: 0% 0%;/*设置动画的基点*/
/*兼容webkit内核*/
-webkit-transition: 1s cubic-bezier(.37,1.44,.57,.77) 500ms;
-webkit-transform-origin: 0% 0%; } /*鼠标悬浮后的样式*/
#box:hover {
transform: rotate(45deg);
/*兼容webkit*/
-webkit-transform: rotate(45deg);
}



注意,"transform-origin"属性是放在"#box"上而不是"#box:hover"

animation 和 keyframes

  上面提到的动画均为补间动画,自定义初始和结束的状态,由浏览器计算渲染中间状态。这些初始和结束的关键状态,可以称为“关键帧”,即“keyframes”。如果我们想实现更为精细的动画效果,想在元素变换的“过程中”也加上特定的“状态”,即插入“关键帧”,可以通过 “keyframes” 和 “animation” 属性实现。

  animation包含8个子属性:

名称 描述
name keyframe的名称
duration 持续时间
timing-function 速度曲线
delay 延迟多久才开始
iteration-count 播放的次数,一整个动画流程为一次
direction 是否在播放完后再反向播放
fill-mode 动画不播放时的样式
play-state 动画的状态,正在运行还是暂停

keyframe的定义如下:

@keyframes name{
percentage1 {state1}
percentage2 {state2}
} /*兼容webkit*/
@-webkit-keyframes name{
percentage1 {state1}
percentage2 {state2}
}

name 是关键帧的名称

percentage 是动画周期的时刻百分比,即整个动画周期的第百分之几的时刻,50%表示播放到一半,30%表示动画播放到百分之30.

state 是该时刻的元素状态,如“top: 10px”,此刻元素距离上方的距离。

修改html文件:

<html>

<div id="box" style="line-height: 100px; text-align: center;">测试</div>

<style>

/*关键帧*/
@keyframes test{
0%,20%,50%,80%,100%{transform: translateX(0)}
40%{transform: translateX(30px)}
60%{transform: translateX(15px)}
} /*兼容*/
@-webkit-keyframes test{
0%,20%,50%,80%,100%{-webkit-transform: translateX(0)}
40%{-webkit-transform: translateX(30px)}
60%{-webkit-transform: translateX(15px)}
} #box {
background-color: rgb(246, 96, 78); /*背景色*/
width: 100px; /*宽度*/
height: 100px; /*长度*/
position: relative; /*位置*/
border-radius: 15px; /*加点圆角*/
transition: 1s linear 500ms; /*过渡效果*/
-webkit-transition: 1s linear 500ms; /*过渡效果,兼容webkit内核*/
} /*鼠标悬浮后的样式*/
#box:hover {
animation:test 1s 0s ease both; /*绑定关键帧*/
-webkit-animation: test 1s 0s ease both; /*兼容*/
}
</style> </html>

效果:

CSS3动画基础的更多相关文章

  1. CSS3 动画基础

    该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html   译文:你需要知道的CSS3 动画技术 原文:Wha ...

  2. css3动画基础详解(@keyframes和animation)

    我们经常会看到CSS3能制作出很炫酷的动画效果,但是自己却只能做一些简单的.原因是对CSS3动画只知其一,不知其二.最近正好有做动画的项目,于是花时间将css3动画做了一个探究之旅,记录在册. 动画是 ...

  3. [转]WebKit CSS3 动画基础

    前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下.首先看看效果http://www.css88.com/demo/css3_Animation/ 很悲剧的是css3动画现在只有WebK ...

  4. 如何快速上手基础的CSS3动画

    前言 说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,比如旋转.倾斜.位移等,trans ...

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

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

  6. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  7. CSS3动画基本的转换和过渡

    理论知识不扎实,在一定程度上能体现你解决问题的能力.今天我们拿CSS3动画来说,简单回忆下他的一些基本属性,这些我们在平常应用中会经常用到. 常用动画属性: transform:translate(x ...

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

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

  9. CSS3 动画记

    css3 动画 在CSS3中可以通过animation创建复杂的动画序列,像transition属性一样用来控制CSS的属性实现动画效果. animation实现动画效果主要由两个部分组成. 通过类似 ...

随机推荐

  1. IM聊天教程:发送图片/视频/语音/表情

    经常有朋友问起,如何在IM即时通讯中实现发送图片.视频.语音和表情? 为此,小编特意写了一个vue版本的Demo,实现了图片视频文件和表情的的发送,参考这个Demo源代码,相信你就可以轻松的用Unia ...

  2. Python list列表修改元素

    Python 提供了两种修改列表(list)元素的方法,你可以每次修改单个元素,也可以每次修改一组元素(多个). 修改单个元素 修改单个元素非常简单,直接对元素赋值即可.请看下面的例子: nums = ...

  3. Error: ER_BAD_FIELD_ERROR: Unknown column 'xxx' in 'where clause'

    node中调用mysql模块读写时候,如果直接插入字符串: connection.query('SELECT * from  users WHERE name=' + data.name , call ...

  4. HTML标签和属性二

    五.文本标记 7.文本样式 <b></b>  <strong></strong> 加粗 <i></i>   <em> ...

  5. JS函数和对象

    1.函数 isNaN(数据)/parseInt/parseFloat/Number/prompt... 函数分为系统函数和自定义函数 function: 功能体,函数(方法),可以接受若干个数据,返回 ...

  6. 9.4 Go 数据格式

    9.4 Go 数据格式 1.1. msgpack格式 官方msgpack官网用一句话总结: It’s like JSON. but fast and small. 简单来讲,它的数据格式与json类似 ...

  7. wxss--外联样式与内联样式

    外联样式 有样式表a.wxss和index.wxss如下: /**a.wxss**/ .container1{ border: 1px solid #000; } /**index.wxss**/ . ...

  8. UIStackView上手教程

    https://www.jianshu.com/p/19fbf3ee2840 https://www.cnblogs.com/bokeyuanlibin/p/5693575.html https:// ...

  9. 深入理解Java虚拟机(1)

        对于Java程序员,在虚拟机自动内存管理机制的帮助下,不需要再为每一个操作写配对的释放资源操作,不容易出现内存泄露和内存溢出问题.加深对Java虚拟机的理解,有助于在发现问题时精准定位问题,排 ...

  10. Python小技巧:如何批量更新已安装的库?

    众所周知,升级某个库(假设为 xxx),可以用pip install --upgrade xxx 命令,或者简写成pip install -U xxx . 如果有多个库,可以依次写在 xxx 后面,以 ...