今日天氣
![]()
多云
多云
過渡動(dòng)畫transition
- transition-property 選項(xiàng)1(必須): 規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱别威。
- transition-duration 選項(xiàng)2(必須): 規(guī)定完成過渡效果需要多少秒或毫秒朝扼。
- transition-timing-function 選項(xiàng)3(可選): 規(guī)定速度效果的速度曲線盹靴。
- transition-delay 選項(xiàng)4(可選): 定義過渡效果何時(shí)開始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>過渡動(dòng)畫</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 轉(zhuǎn)換, 就是平移(橫向的,縱向的)
???translate-x: 橫向移動(dòng)
???translate-y: 縱向移動(dòng)
???translate: 兩個(gè)選項(xiàng): 第一個(gè)選項(xiàng)橫向移動(dòng), 第二個(gè)選項(xiàng)縱向移動(dòng)
??2.rotate() 旋轉(zhuǎn)
??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旋轉(zhuǎn)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>
塊級(jí)格式化上下文BFC
- 什么是BFC
- BFC的布局規(guī)則(盒子變成BFC后有什么特殊的地方)
- 如何創(chuàng)建一個(gè)BFC(一個(gè)盒子在什么條件下會(huì)變成bfc)
- BFC的應(yīng)用
1. 什么是BFC
BFC全稱Block Formatting Context妆兑，翻譯過來就是塊級(jí)格式化上下文, 也就是常說的BFC, 如同彈性盒子一樣, 當(dāng)一個(gè)元素變成了BFC, 它就具備了一些特殊的功能.
2. 如何創(chuàng)建一個(gè)BFC(一個(gè)盒子在什么條件下會(huì)變成bfc)
- 浮動(dòng)元素呀打，float 除 none 以外的值肪虎；
- 絕對(duì)定位元素，position（absolute哮幢，fixed）带膀；
- overflow 除了 visible 以外的值（hidden，auto橙垢，scroll）垛叨；
- display 為以下其中之一的值 inline-block，table-cell柜某，table-captio1, flex嗽元；
- body 根元素
3. BFC的布局規(guī)則(盒子變成BFC后有什么特殊的地方)
- 內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置敛纲。
- bfc就是頁(yè)面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素剂癌。
- bfc的區(qū)域不會(huì)與float的元素區(qū)域重疊淤翔。
- 垂直方向上的距離由margin決定
- 計(jì)算bfc的高度時(shí)，浮動(dòng)元素也參與計(jì)算
