CSS3动画

本文深入探讨CSS3动画和过渡的基本概念与实现方法,包括transform变形、transition过渡及animation动画的关键帧设置。涵盖平移、缩放、倾斜、旋转等效果的详细解释,以及如何利用伪类触发过渡和动画,适用于网页动态效果的设计与优化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS3动画

网页的动态效果

实现动画效果的四种方式

  1. 动态图片
  2. Flash
  3. CSS动画相关属性
  4. JavaScript

实现CSS3动画的三种方式

  1. CSS3变形
  2. CSS3过渡
  3. 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°
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值