今日天气
![]()
多云
多云
过渡动画transition
- transition-property 选项1(必须): 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 选项2(必须): 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 选项3(可选): 规定速度效果的速度曲线。
- transition-delay 选项4(可选): 定义过渡效果何时开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡动画</title>
</head>
<style>
img{
width: 150px;
height: 200px;
transition: all 0.4s ease 0.1s;
}
img:hover{
height: 400px;
width: 300px;
}
</style>
<body>
<div>
<img src="./images/宝子.jpg" alt="">
</div>
</body>
</html>
2D变换
transform
1.translate() 定义 2D 转换, 就是平移(横向的,纵向的)
translate-x: 横向移动
translate-y: 纵向移动
translate: 两个选项: 第一个选项横向移动, 第二个选项纵向移动
2.rotate() 旋转
3.scale() 缩放
4.skew() 倾斜
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p{
width: 200px;
height: 50px;
border: 1px solid;
margin-top: 100px;
transition: all 0.5s;
}
/* p1水平平移300px */
.p1:hover {
transform: translateY(300px);
}
/* p2旋转90度 */
.p2:hover {
transform: rotate(360deg);
}
/* p3缩小一半 */
.p3:hover {
transform: scale(2);
}
/* p4横轴倾斜20度 */
.p4:hover {
transform: skew(20deg, 20deg);
}
</style>
</head>
<body>
<p class="p1">translate</p>
<p class="p2">rotate</p>
<p class="p3">scale</p>
<p class="p4">skew</p>
</html>
块级格式化上下文BFC
- 什么是BFC
- BFC的布局规则(盒子变成BFC后有什么特殊的地方)
- 如何创建一个BFC(一个盒子在什么条件下会变成bfc)
- BFC的应用
1. 什么是BFC
BFC全称Block Formatting Context，翻译过来就是块级格式化上下文, 也就是常说的BFC, 如同弹性盒子一样, 当一个元素变成了BFC, 它就具备了一些特殊的功能.
2. 如何创建一个BFC(一个盒子在什么条件下会变成bfc)
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素，position（absolute，fixed）；
- overflow 除了 visible 以外的值（hidden，auto，scroll）；
- display 为以下其中之一的值 inline-block，table-cell，table-captio1, flex；
- body 根元素
3. BFC的布局规则(盒子变成BFC后有什么特殊的地方)
- 内部的Box会在垂直方向上一个接一个的放置。
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
- bfc的区域不会与float的元素区域重叠。
- 垂直方向上的距离由margin决定
- 计算bfc的高度时，浮动元素也参与计算
