从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：flex布局 — 今天你学习了吗？（CSS：Day19）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
- 前言
- 第二十节课：过渡和动画
- - 一、什么是过渡
  - 二、过渡的属性
  - 三、什么是动画
  - 四、动画的属性

前言

emmm，别问我为什么忽然跳章节了，问就是补了，没补上，但是也不能落下新课，后期补的话，相当于自学，老师讲的知识就留不住了。

第二十节课：过渡和动画

一、什么是过渡

网页标题logo的设置

网页标题logo一般都是使用专门的图片，是以.ico结尾的图片。
ico图标生产网址：https://www.bitbug.net/
在网页头部标签中使用：<link rel="shortcut icon" href="favicon.ico">
注意：一般我们的这张图片都放在根目录下面，不会和其他图片放一起。

什么是过渡

鼠标移动到一个元素上面，元素发生变化，鼠标移走，变化消失，这是一个动态的过程，这就是过渡。
CSS过渡允许您在给定的时间内平滑地改变属性值。
通过过渡可以指定一个属性发生变化的切换方式。
通过过渡可以创建一些非常好的效果，提升用户体验，提升用户体验感。
使用过渡就是使用我们这一个，transition这一属性。

二、过渡的属性

transition【复合写法，用于将四个过渡属性设置为单一属性】

语法：transition: property duration timing-function delay;
语法中前两个属性是必须的

实例：
原图：

鼠标悬浮后：
代码：

<!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>过渡</title><style>.one{width: 400px;height: 400px;border: 5px solid purple;}.two{width: 100px;height: 100px;background-color: teal;transition: all 2s;}.one:hover .two{width: 300px;height: 300px;background-color: pink;}</style>
</head>
<body><div class="one"><div class="two"></div></div>
</body>
</html>

transition-duration【规定过渡效果要持续多少秒或者多少毫秒。属性值：时间，必须属性】
transition-delay【规定过渡效果的延迟（以秒计）。属性值：时间】
transition-property【规定过渡效果所针对的CSS属性的名称。】
transition-timing-function【规定过渡效果的速度曲线。】
这其中的属性值不分顺序的，但是第一个时间必定是过渡花费时间、持续时间第二个时间才是过渡延迟时间。

CSS中的transition-timing-function属性可使用的属性值：

ease【规定过渡效果，先缓慢开始，然后加速，然后缓慢地结束（默认）】
linear【规定从开始到结束具有相同速冻的过渡效果，匀速运动】
ease-in【规定缓慢开始的过渡效果，加速运动】
ease-out【规定缓慢结束的过渡效果，减速运动】
ease-in-out【规定以慢速开始和结束的过渡效果】
cubic-bezier(n,n,n,n)【允许您在三次贝塞尔函数中定义自己的值】
steps(n) 【分步执行】

贝塞尔函数：https://cubic-bezier.com

过渡中需要注意的点：

CSS样式中，display这个属性不能使用过渡属性（opacity可以过渡）
效果的持续时间

例子：

代码：

<!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>过渡</title><style>.one{width: 400px;height: 400px;border: 5px solid purple;}.two{width: 100px;height: 100px;background-color: teal;transition-duration: 2s;transition-delay: 1s;transition-property: all;transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);}.one:hover .two{margin-top: 200px;}</style>
</head>
<body><div class="one"><div class="two"></div></div>
</body>
</html>

三、什么是动画

CSS可实现HTML元素的动画效果
动画使元素逐渐从一种样式变为另一种样式。您可以随意更改任意数量的CSS属性。相当于以前的动画片一样，需要很多张定格图像，然后连贯起来，那么渣样的一个连贯就是我们的动画了，在我们html中也是可以简单设置一些动画。那么其中一张张定格图片就是我们的关键帧。
如需使用CSS动画，您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的的样式。

四、动画的属性

@keyframes【规定动画模式。设置关键帧】
animation【设置所有动画属性的简写属性。除了时间后顺序要求，其他没有顺序要求】
animation-name【规定@keyframes动画的名称。必须属性】
animation-duration【规定动画完成一个周期应花费的时间。必须属性】
animation-delay【规定动画开始的延迟。】
animation-iteration-count【动画迭代次数，规定动画应播放的次数。】
a. 自然数【1,2,3…】
b. infinite【无限执行】
animation-direction【指定动画的执行方向，定动画是向前播放、向后播放还是交替播放】
a. normal【默认值，就是从from-to】
b. reverse【从to-from，每次都这样】
c. alternate【从from-to运行，回来的时候反向执行】
d. alternate-reverse【to-from运行，回来的时候反向执行】
animation-timing-function【规定动画的速度曲线。和过渡的属性值一样】
animation-fill-mode【规定元素在不播放动画之后时的样式（在开始前、结束后，或两者同时）。】
a. none【默认值，在动画执行完之后，回到原来样式】
b. forwards【动画执行完之后，会展现to的样式，基数】
c. backwards【动画延时等待时，元素会显示from样式】
d. both【结合了frowards和backwards】
animation-play-state【指定动画的执行状态，规定动画是运行还是暂停。】
a. running【默认值，动画执行】
b. paused【动画暂停】

实例：
运动前：

运动中：

运动后：

代码：

<!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><style>.one{width: 400px;height: 400px;border: 5px solid skyblue;}.two{width: 100px;height: 100px;background-color: pink;animation-name: run;animation-duration: 3s;animation-iteration-count: infinite;}@keyframes run{from{margin-top: 5px;background-color: pink;}to{margin-top: 250px;margin-left: 200px;background-color: teal;}}</style>
</head>
<body><div class="one"><div class="two"></div></div>
</body>
</html>

菜鸟教程：

预习：从零开始学前端：形变 — 今天你学习了吗？（CSS：Day21）

------在今天和明天之间，有一段很长的时间；趁你还有精神的时候，学习迅速办事。

从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）相关推荐

从零开始学前端：复习课程 --- 今天你学习了吗？（CSS：Day11）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS复合选择器 - 今天你学习了吗?(CSS:Day10) 文章目录从零开始学前端:程序猿小白也可以完 ...
从零开始学前端：初识JavaScript --- 今天你学习了吗？（JS：Day01）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:jQuery官网 - 今天你学习了吗?(CSS:Day26) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：列表标签 --- 今天你学习了吗？（CSS：Day06）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表单制作 - 今天你学习了吗?(CSS:Day05) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：表格制作 --- 今天你学习了吗？（CSS：Day04）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:链接跳转 - 今天你学习了吗?(CSS:Day03) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:初识JavaScript - 今天你学习了吗?(JS:Day1) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:复习课程 - 今天你学习了吗?(CSS:Day11) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：CSS复合选择器 --- 今天你学习了吗？（CSS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS背景颜色 - 今天你学习了吗?(CSS:Day09) 文章目录从零开始学前端:程序猿小白也可以完全 ...
从零开始学前端：CSS引入 --- 今天你学习了吗？（CSS：Day07）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:列表标签 - 今天你学习了吗?(CSS:Day06) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...

从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）