CSS3动画
网页的动态效果
实现动画效果的四种方式
- 动态图片
- Flash
- CSS动画相关属性
- JavaScript
实现CSS3动画的三种方式
- CSS3变形
- CSS3过渡
- CSS3动画
CSS3变形 (transform)
每个效果都可以称为变形(transform),它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
css transform:[transform-function] *;
平移
translate():平移函数,基于X、Y坐标重新定位元素的位置
语法格式
translateX(tx)
表示只设置X轴的位移
transform:translate(100px,0) = transform:translateX(100px)
translateY(ty)
表示只设置Y轴的位移
transform:translate(0,100px) = transform:translateY(100px)
课堂案例
设置a元素在鼠标移入时向右下角移动4px,8px
缩放
scale()函数可以只接收一个值,也可以接收两个值,只有一个值时,第二个值默认和第一个值相等
语法格式
scale(sx,sy);
横向坐标(宽度)方向的缩放量
纵轴坐标(高度)方向的缩放量
scaleX(sx):表示只设置X轴的缩放
transform:scale(2,0) = transform:scaleX(2)
scaleY(sy):表示只设置Y轴的缩放
transform:scale(0,2) = transform:scaleY(2)
课堂案例
设置a元素在鼠标移入时放大1.5倍显示
倾斜
可以仅设置沿着X轴或Y轴方向倾斜
语法格式
skewX(ax):表示只设置X轴的倾斜
skewY(ay):表示只设置Y轴的倾斜
课堂案例
设置a元素在鼠标移入时向左下角倾斜
旋转
元素相对原来中心顺时针旋转,单位使用deg(度)表示
注意:
rotate( )函数只是旋转,而不会改变元素的形状
skew( )函数是倾斜,元素不会旋转,会改变元素的形状
课堂案例
定义动画的状态,鼠标移入旋转
也可以四个同时设置
transform: skew(15deg) translate(30px) scale(3.0) rotate(60deg);
练习
制作照片墙
训练要点
使用结构伪类选择器选择元素
使用position定位网页元素
使用div、img元素布局页面
使用2D变形(transform)属性操作图片
需求说明
使用结构伪类选择器选择每一张图片,把它们分别定位到对应的位置
使用transform属性为每张图片设置初始的旋转角度
设置鼠标移入图片特效,当前鼠标移入的图片放大1.5倍、旋转角度变为0°、覆盖在其他图片上面
实现思路
使用div元素整体布局页面,使用img元素排版图片
使用position属性将所有图片全部定位在坐标原点
使用结构伪类选择器分别选择每一张图片,分别把它们定位到不同的位置,再设置不同的旋转度数
鼠标移入图片后,图片放大1.5倍且不旋转
制作旋转按钮
需求说明
使用h1、无序列表、超链接a、img布局页面
使用浮动让列表项排在一行,再清除浮动
鼠标移入每个超链接上,图片旋转360°,放大1.2倍
CSS 过渡
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等
transition-property 规定设置过渡效果的 CSS 属性的名称。
定义转换动画的CSS属性名称
IDENT:指定的CSS属性(width、height、background-color属性等)
all:指定所有元素支持transition-property属性的样式,一般为了方便都会使用all
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐隐效果)
ease-in-out:速度先加速再减速(渐显渐隐效果)
transition-delay 定义过渡效果何时开始。
格式:
通过一些CSS的简单动作触发样式平滑过渡
常用动作:
伪类触发
:hover
:active
:focus
:checked
实现步骤
1.在默认样式中声明元素的初始状态样式
2.声明过渡元素最终状态样式,如悬浮状态
3.在默认样式中通过添加过渡函数,添加一些不同的样式
练习
照片墙改进
给每张图片添加过渡效果,用伪类hover触发过渡
动画的总时长为0.6s,没有延迟,动画方式为ease-in-out
制作QQ彩贝热销时装页面
需求说明
使用div、无序列表、超链接等标签进行有语义的布局页面结构
鼠标移入图片时,图片向左边位移12px
使用过渡设置动画时间持续1s,动画的方式为ease-out
CSS 动画
animation动画简介
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
注意:写兼容的时候浏览器前缀是放在@keyframes中间
例如:@-webkit-keyframes、@-moz- keyframes
动画的播放次数(animation-iteration-count)
值通常为整数,默认值为1
特殊值infinite,表示动画无限次播放
动画的播放方向(animation-direction)
normal,动画每次都是循环向前播放
alternate,动画播放为偶数次则向前播放
动画的播放状态(animation-play-state)
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
动画发生的操作(animation-fill-mode)
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果
练习
QQ彩贝导航
训练要点
使用结构伪类选择器选择元素
使用position定位网页元素
使用@keyframes创建关键帧
使用animation属性引用设置的动画
实现思路
给“赚积分”版块设置动画的关键帧
鼠标指针移入后图片由“赚”变为“赚积分”,并且使用关键帧设置动画
设置右边“论”图片。在鼠标指针移入时旋转360°
给“论”图片加上过渡动画效果
需求说明
使用定位属性把图片“赚”和“花”设置到相对应的位置上
使用animation属性给中间的“赚”和“花”图片设置动画,动画效果为鼠标移入“赚”图片的时候变为“赚积分”,并且是从左到右缓慢展开的效果
使用transition属性给右边的“论”图片设置动画,效果为鼠标移入旋转360°