CSS过渡属性与动画效果

最新推荐文章于 2024-01-28 22:32:39 发布

暮白寒窗雪

最新推荐文章于 2024-01-28 22:32:39 发布

阅读量420

点赞数 6

文章标签： css

本文链接：https://blog.csdn.net/tiben/article/details/116531029

版权

本文主要探讨CSS中的过渡属性和动画效果，包括页面内嵌入的图像、视频和音频的处理，重点讲解了CSS的过渡效果，2D变形函数以及如何创建和控制动画的详细步骤，配以实例进行说明。

摘要由CSDN通过智能技术生成

CSS过渡属性与动画效果

一、页面内嵌入图像，视频，音频

(1)图像

A、把图像作为背景：background-image
B、使用图像标签：<img src="图像名" alt="" width="" height="" />

(2)视频

A、视频格式：.mp4 .ogg  .webm
B、视频标签：<video src="视频文件名" controls="controls"/>
   src：视频文件全路径名
   controls：显示播放控制按钮
   autoplay：自动播放(页面加载完成后)
   loop 的作用：循环播放    
   preload：页面加载时，预播放视频。若使用了autoplay则该属性忽略
   poster：当视频缓存不足时，按比例显示该属性指定的图像

(3)音频

A、音频格式： .mp3  .ogg  .wav  .avi	
B、音频标签：<audio src="" controls="controls"><audio>	
   src：音频文件的全路径名
   controls：显示播放控制按钮
   autoplay：页面载入完成后自动播放音频
   loop：循环播放
   preload：页面加载时，预播放音频。若使用了autoplay则该属性忽略

(4)source指定多个备用的音视频文件

 <audio controls="controls">
			   <source  src="文件全路径名" type="文件类型">
			   <source  src="文件全路径名" type="文件类型">
			   <source  src="文件全路径名" type="文件类型">
			   ......
			</audio>

二、过渡

(1)transition-property :使用过渡效果的CSS属性名
   none : 没有过渡效果
   all : 所有属性都获得过渡效果
   property：定义应用过渡效果的属性名称，若是多个属性，属性之间用逗号隔开
(2)transition-duration: 指定对象过渡的持续时间

(3)transition-timing-function：过渡效果的速度曲线
	linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) 
    ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) --- 默认
    ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) 
    ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) 
	ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 
    cubic-bezier(<number>, <number>, <number>, <number>)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内 

(4)transition-delay：过渡的延迟时间

(5)transition：property duration timing-function delay;

三、变形

transform：none | transform-functions;
     none：表示不变形
	 transform-functions：表示变形函数

2D变形函数：

		transform: matrix(0,1,1,1,10,10); /* 矩阵变形 */
		transform: translate(100px,-10px); /* 平移：给定的x轴、y轴坐标进行平移*/
		transform: rotate(30deg); /*旋转：按给定的度数进行旋转*/
		transform: scale(.8); /*缩放变形*/
		transform: skew(-25deg); /*斜切变形*/

四、动画

(1)创建动画：

@keyframes  动画名称{
	      
		   @keyframes-selector { css-styles }
	  }

keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，
to和100%效果相同表示动画的结束。
css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。

(2)使用animation-name属性使用定义好的动画

(3)使用animation-duration属性设置动画完成所需要的时间(时间单位可以是秒(s),也可以是毫秒(ms))

过渡实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>