从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(Day20)
复习:从零开始学前端:flex布局 — 今天你学习了吗?(Day19)
文章目录
前言
emmm,别问我为什么忽然跳章节了,问就是补了,没补上,但是也不能落下新课,后期补的话,相当于自学,老师讲的知识就留不住了。
一、什么是过渡
1. 网页标题logo的设置
网页标题logo一般都是使用专门的图片,是以.ico结尾的图片。
ico图标生产网址:https://www.bitbug.net/
在网页头部标签中使用:<link rel="shortcut icon" href="favicon.ico">
注意:一般我们的这张图片都放在根目录下面,不会和其他图片放一起。
2. 什么是过渡
鼠标移动到一个元素上面,元素发生变化,鼠标移走,变化消失,这是一个动态的过程,这就是过渡。
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>
菜鸟教程:
预习:从零开始学前端:形变 — 今天你学习了吗?(Day21)
------在今天和明天之间,有一段很长的时间;趁你还有精神的时候,学习迅速办事。