Web前端 学习知识点总结（七）Css3动画animation

最新推荐文章于 2022-05-10 12:27:01 发布
最新推荐文章于 2022-05-10 12:27:01 发布
阅读量593 收藏 4
点赞数
分类专栏： Web前端 文章标签： css css3 html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118229/article/details/109205831
版权

系列文章目录

Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.

文章目录

前言

通过transform，transition和animation可以在页面中做出一些基本的动画效果。

一、早期的动画

  1. Gif

GIF是一种位图。GIF采用Lempel-Zev-Welch（LZW）压缩算法，最高支持256种颜色。由于这种特性，GIF比较适用于色彩较少的图片，比如卡通造型、公司标志等等。

如果碰到需要用真彩色的场合，GIF的表现力有限。

在Web运用中，图像的文件量的大小会影响到下载的速度，因此可以根据GIF带调色板的特性来优化调色板（GIF通常会自带一个调色板，里面存放需要用到的各种颜色。），减少图像使用的颜色数（有些图像用不到的颜色可以舍去），而不影响到图片的质量。

位图的大致原理是：图片由许多的像素组成，每一个像素都被指定了一种颜色，这些像素综合起来就构成了图片。

  1. Flash

由于HTML（标准通用标记语言下的一个应用）的功能十分有限，无法达到人们的预期设计，更需要一种既简单直观又有功能强大的动画设计工具，而Flash的出现正好满足了这种需求。

Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。

  1. JavaScript

JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript是很重要的web内容 ，等后面会详细介绍。

二、CSS3的动画效果

-webkit- 浏览器的内核，很多的浏览器都不兼容动画效果，需要加上该语句。

1.transform

-webkit-transform: 只看结果没有过程，一般只做小效果，不用于整体的设计。一下为transform可以接的属性。

  • （1）translate(x，y)平移（x，y为实数）。 正值往右 正值往下。或者可以在某一个指定的方向上。如下：

     		在X方向
 		translateX();
 		在Y方向
 		translateY();

相对于自身位置发生了偏移，原来的位置还在，没有脱离标准文档流，对周边元素没有影响（同前面的relative类似）

  • （2）scal(x,y)

  • 当x,y=1 不变

  • 当x,y >1 不变

  • 当x,y<1 缩放

    当只写一个值的时候，X，Y轴上的缩放量一致。

            在X方向
 			scaleX();
 	    在Y方向
 			scaleY();

  • （3）skew()倾斜 单位deg。

     		skewY(y);	y为正，Y轴不动，X轴逆时针倾斜
 		skewX(x);	x为正，X轴不动，Y轴逆时针倾斜

  • （4）rotate()旋转 单位deg。

     		当数值大于零时 为顺时针旋转。
 		当数值小于零时 为逆时针旋转。

倾斜和旋转的区别：旋转自身不会变化 倾斜自身会进行改变。

代入的事例，webkit-tansform：+需要的内容。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		div{
				-webkit-transform: translate(30px,30px);
				-webkit-transform: scale();
				-webkit-transform: skew();
				-webkit-transform: rotate();
			}
				
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

2.transition

transition 过度，一般加在函数和触发机制之间。

  1. 有两个状态 起始–结束

  2. 过渡函数放在起始状态

transition 和 display：none冲突

触发机制：

  • 1.伪类处罚 hover active(鼠标悬浮的时候) focused(鼠标获取焦点的时候 比如在 input 选中的时候) checked(一般用在check中)
  • 2.@media 媒体查询
  • 3.JavaScript

下面介绍一些transition的一些属性。

	transition-property 需要显示过程的属性
	transition-duration 过度持续时间 单位是S
	transition-timing-function: ;时间函数
				ease 快--慢
			 	linear 匀速
			 	ease-in 慢--快
			 	ease-out 快--慢
			 	ease-in -out 慢--快--慢
	transition-delay: 2s; 推迟多久后过渡执行  防止误操作

有一些基本的用法如下html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				/*必须有*/
				transition-property:all;
				transition-duration:2s ;
				/*可选择*/
				transition-timing-function: ;
				transition-delay:0.4s;
				/*混合属性*/
				/*transition: all 2s; 符合属性直接没有顺序，某些数值可以省略*/
				}
			div:hover{
				background-color:green;
				margin: 50px;
				width: 300px;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

3.animation

一般用的是
-webkit-animation-name: change; 为调用的结构，调用设置好的函数。

keyframes 加 change（函数名）{ }
括号的内部有from~to表示起始状态和最后的状态。

@-webkit-keyframes change{
from{background:orange;}
20%{background:yellow;}
40%{background:greenyellow;}
60%{background:dodgerblue;}
80%{background:blue;}
to{background: purple;}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				/*animation: ;动画
				包含多个状态 ,借助关键帧
				*/
				width: 100px;
				height: 100px;
				background-color: red;
				-webkit-animation-name: change;
				-webkit-animation-duration:3s ;
				/*direction方向*/
				-webkit-animation-direction: reverse;
				/*奇数次是正方向 偶数次是反方向的*/
				-webkit-animation-direction: alternate;
				/*动画执行的次数*/
				/*无穷次*/
				/*-moz-animation-iteration-count:infinite;*/
				/*会停在最后一帧的位置*/
				animation-fill-mode:forwards;
				/*从下一个状态开始等待，等待期间显示关键帧的起始状态*/
				animation-fill-mode:backwards;
				}
				/*播放状态 可以让动画暂停*/
				-webkit-animation-play-state:paused;
				/*对动画的定义*/
			@-webkit-keyframes change{
				from{background:orange;}
				20%{background:yellow;}
				40%{background:greenyellow;}
				60%{background:dodgerblue;}
				80%{background:blue;}
				to{background: purple;}
			}
		</style>
		
	</head>
	<body>
		<div></div>
	</body>
</html>

三、侧边栏案例

用下面一个侧边栏的案例来总结，以上的知识点，因为侧边栏和display:block冲突，只能用动画去解决问题。

要求：做到如下
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.side{
				position: relative;
			}
			/*开始设置为灰色状态,不设置width*/
			/*第一个插件 我的关注*/
			.side #img:nth-of-type(1){
				/*width:150px;*/
				height:50px;
				/*text-align:center;*/
				/*不让盒子增加*/
				border-bottom-left-radius: 10px;
				border-top-left-radius: 10px;
				background-color:#414141;
				position: absolute;
				right:0;
				bottom: -360px;		
				transition: all 0.3s;				
				/*background-color: #B81B16;*/
			}
			/*第二个插件 我的收藏*/
			.side #img:nth-of-type(2){
				/*width:150px;*/
				height:50px;
				/*text-align:center;*/
				/*不让盒子增加*/
				border-bottom-left-radius: 10px;
				border-top-left-radius: 10px;
				background-color:#414141;
				position: absolute;
				right:0;
				bottom: -420px;		
				transition: all 0.3s;				
				/*background-color: #B81B16;*/
			}
			
			/*第三个插件 我的订单*/
			.side #img:nth-of-type(3){
				/*width:150px;*/
				height:50px;
				/*text-align:center;*/
				/*不让盒子增加*/
				border-bottom-left-radius: 10px;
				border-top-left-radius: 10px;
				background-color:#414141;
				position: absolute;
				right:0;
				bottom: -480px;		
				transition: all 0.3s;				
				/*background-color: #B81B16;*/
			}
			
			/*第四个插件 我的热爱*/
			.side #img:nth-of-type(4){
				/*width:150px;*/
				height:50px;
				/*text-align:center;*/
				/*不让盒子增加*/
				border-bottom-left-radius: 10px;
				border-top-left-radius: 10px;
				background-color:#414141;
				position: absolute;
				right:0;
				bottom: -540px;		
				transition: all 0.3s;				
				/*background-color: #B81B16;*/
			}
			
			/*p的标签 a中的内容 先隐藏*/
			.side #img p {
				display: none;
				line-height: 50px;
				color: white;
				padding-left:22px ;
				font-weight: bold;
				float:left;
				-webkit-animation-name: change;
				-webkit-animation-duration:1.5s ;
			}
			.side #img p a{
				text-decoration: none;
				color: white;
			}
			.side #img img{
				margin:8px 5px 5px;
				padding: 2px;
				width:35px;
				float: right;
				
			}
			/*显示p的内容*/
			.side #img:hover p{
				/*width:100px;
				height:50px;*/
				display: block;
				background-color:#B81B16;
				border-bottom-left-radius: 10px;
				border-top-left-radius: 10px;
			}
			/*显示内容后也更改图标的颜色*/
			.side #img:hover {
				background-color:#B81B16;
			}
			/*display和动画效果冲突*/
			@-webkit-keyframes change{
				from{width: 75px;}
				
				to{width:90px;}
			}
			.clear:after{
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="side">
			<div id="img" class="clear">
				<p><a href="#">我的关注</a></p>
				<img src="img/微信图片_20201019204900.png"/>
			</div>
			
			<div id="img" class="clear">
				<p><a href="#">我的收藏</a></p>
				<img src="img/微信图片_20201019204903.png"/>
			</div>
			
			<div id="img" class="clear">
				<p><a href="#">我的订单</a></p>
				<img src="img/微信图片_20201019204905.png"/>
			</div>
			
			<div id="img" class="clear">
				<p><a href="#">我的热爱</a></p>
				<img src="img/微信图片_20201019204907.png"/>
			</div>
		</div>
		
	</body>
</html>

结果：
完成结果

Le`soleil
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web前端开发知识点总结.docx编程资料
04-06
### Web前端开发知识点总结 #### 一、HTML知识总结 **1.1 HTML基础** - **HTML概述**：HTML（Hyper Text Markup Language）是用于创建网页的标准标记语言。 - **HTML文档结构**： - `<!DOCTYPE html>`：声明文档...
【前端知识点总结】CSS 基础六 - 常见的CSS动画
jiang_ziY的博客
02-15 1064
本章内容包含： 1、空间 （3d）转换 移动、旋转、立体呈现， 2、动画， 3、精灵动画，4、常见的CSS动画效果,（1）立体导航效果，（2）双开门效果，（3），GIF动图效果，（4）钟表效果，（5）立方体旋转。.......等
学习web（前端）的知识点汇总，初学者稳稳拿捏!!!
m0_59273150的博客
10-01 7579
目录 1、HTML知识点汇总 2、CSS知识点汇总 3、JS知识点汇总 一、HTML5（网页的骨架） 常用开发软件：Hbuilderx 使用过程：创建项目—创建目录—编写代码—运行（crtl+R） >>> <1>标签： 6类： 标题标签：h1-h6 *用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式） div标签:（块级标签） *有换行默认样式 p标...
HTML5和CSS3动画效果知识点总结
最文艺的程序媛
07-12 1411
1.响应式布局； 响应式布局有两种方法：1. 流式布局：百分比布局（宽，高，定位置） 所谓百分比，尺寸的百分比：基于父级的百分比。 流式布局需要在head里面写上这句话： 使用流式布局是需要注意几点：margin，padding 设置这两个数值时， 需要根据屏幕宽度变化而改变数值（并不是高度）即：margin数值/屏幕宽度（父级宽度）= 百分比，left,top,right,bottom 需
css3基础知识点--animation动画
阿俊的博客
07-04 491
CSS3，我们可以创建动画，它可以取代许多网页动画图像，Flash动画，和JAVAScripts。 CSS3 @keyframes 规则 要创建CSS3动画，你将不得不了解@keyframes规则。 @keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 CSS3 动画 当在@keyframes创建动画，把它绑定到一...
H5+CSS3简单动画 知识点 汇总
Yoko优
03-30 4275
乱入几个：  1.h5的一个语义化标签   figure :用于规定独立的流内容（图像 图表 照片 代码等）   figcapition：与figure配套使用，用于标签定义figure元素标题 2.媒体查询： 通过不同的媒体类型和条件定义样式规则 ；媒体查询大部分媒体特性都接受min和max 用于表示“大于等于”或“小于等于”：width: min-width;ma
web前端开发知识点总结.docx
09-27
### 二、CSS知识点总结 #### 1. CSS基础 - **定义**：CSS（Cascading Style Sheets）即层叠样式表，用于控制网页元素的布局和外观。 - **作用**：通过CSS可以轻松地为HTML文档添加样式，如颜色、字体、间距等。 - *...
web前端开发基础知识总结
10-28
### Web前端开发基础知识总结 #### 一、HTML（HyperText Markup Language）基础知识 **1.1 HTML概述** HTML，即超文本标记语言，是用于创建网页的标准标记语言。它通过一系列预定义的元素来描述文档的结构和内容...
前端课程：前端知识学习总结
02-05
以下是对这些关键知识点的详细说明： **HTML（HyperText Markup Language）**： HTML是网页内容的结构标准，用于创建网页的基本元素。HTML5是其最新版本，引入了许多新特性，如离线存储、拖放功能、音频/视频API、...
纯CSS3实现摇头摆尾的小黄狗动画效果源码.zip
最新发布
11-09
总结来说，这个小黄狗动画源码展示了如何使用CSS3的`@keyframes`规则和`animation`属性来创建一个生动有趣的摇头摆尾效果。通过学习和理解这个源码，开发者可以掌握CSS3动画的基本原理，并将其应用到其他项目中，...
书小宅网页设计CSS3——animation动画
qq_36447261的博客
07-28 404
Animation 矩形向椭圆的渐变 <!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3矩形向椭圆的渐变</title> <style> .shape-1{ animation-name:rad;/*绑定*/ animatio...
前端动画——3D立方体盒子
果冻
05-10 567
前言 学动画的时候看到的，很有意思，有兴趣可以看全文 CSS 怎样写一个动画（从基础动画到3d动画) 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
复习（css过渡与动画）
abcdhulei的博客
06-10 150
过渡属性 transition 用于在一个属性中设置四个过渡属性。 代码： div{ width: 100px; height: 100px; background: red; transition: width 2s , height 2s } div:hover{ width: 300px; height: 300px; } 效果： ...
css3 动画总结
hjx_dou的专栏
04-11 942
css3 动画总结
页面动画知识点整理
weixin_33778778的博客
06-13 164
平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类：CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的，这里就不整理了。 CSS动画 CSS3中提供了一个属性transition，用来实现CSS样式的平滑变化。举个例子: .box { widt...
前端实现动画的方法总结
路漫漫其修远兮，吾将上下而求索。
02-25 1831
CSS动画库推荐 Animate.css：https://daneden.github.io/animate.css/ CSS动画教程推荐 Using CSS transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions Using CSS animati...
程序猿必备的10款web前端动画插件十五
测试
12-18 1157
1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。今天分享的这款就是基于jQuery的瀑布流图片筛选插件，我们可以点击图片分类名称，即可将对应分类下的图片以瀑布流的方式展示出来，这款插件在筛选图片上使用还是比较方便的。 在线演示 源码下载 2.基于Layui的可自定义添加删除数据的表格处理插件 如何在网页上编辑表格数据...
Web 前端知识点总结
qq_36428332的博客
10-23 828
一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5.未来三到五年的规划是怎样的？ position的值， relative和absolute分别是相对于谁进行定位的？absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的...
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作
weixin_45118229的博客
11-23 207
系列文章目录 文章目录系列文章目录前言一、jQuery节点的操作1.1 节点的操作1.1 节点的案例1.2 事件绑定1.3 hover事件二、 动画2.1 显示和隐藏2.2 动画案例三、补充3.1 节点的遍历3.2 节点的关系 前言 有了jQuery的基础可以进一步对节点的操作和动画进行学习。类比JavaScript，进行jQuery的学习。 提示：以下是本篇文章正文内容，下面案例可供参考 一、jQuery节点的操作 1.1 节点的操作 所用的html <!DOCTYPE html>
"2023年web前端开发知识点总结：HTML、CSS、JavaScript
2023年web前端开发知识点总结.doc、HTML 知识总结、CSS 知识点总结以及JavaScript 是关于当前网络技术领域的重要内容。本文将从这些方面对web前端开发的知识点做一个总结。 首先，2023年web前端开发知识点总结.doc...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Le`soleil

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值