學(xué)習(xí)來(lái)源：尚硅谷前端html+css零基礎(chǔ)教程，2023最新前端開(kāi)發(fā)html5+css3視頻
系列筆記：
- 【HTML4】（一）前端簡(jiǎn)介
- 【HTML4】（二）各種各樣的常用標(biāo)簽
- 【HTML4】（三）表單及HTML4收尾
- 【CSS2】（四）CSS基礎(chǔ)及CSS選擇器
- 【CSS2】（五）CSS三大特性及常用屬性
- 【CSS2】（六）CSS盒子模型
- 【CSS2】（七）浮動(dòng)
- 【CSS2】（ 八）定位與布局
- 【實(shí)操】（ 九）尚品匯實(shí)操練習(xí)
- 【HTML5】（ 十）HTML5簡(jiǎn)介及相關(guān)新增屬性
- 【CSS3】（ 十一）CSS3簡(jiǎn)介及基本語(yǔ)法（上）| 相關(guān)新增屬性
- 【CSS3】（ 十二）CSS3簡(jiǎn)介及基本語(yǔ)法（中）| 變換、過(guò)渡與動(dòng)畫(huà)
- 【CSS3】 （十三）CSS3簡(jiǎn)介及基本語(yǔ)法（下）| 伸縮盒模型
??前文回顧：前端 | （ 十一）CSS3簡(jiǎn)介及基本語(yǔ)法（上） | 尚硅谷前端html+css零基礎(chǔ)教程2023最新
??前文對(duì)應(yīng)p171-p178，本文對(duì)應(yīng)p178-p183
??補(bǔ)充網(wǎng)站：W3school，MDN
??2D變換
??2D位移
-
位移與相對(duì)定位很相似，都不脫離文檔流，不會(huì)影響到其它元素。
-
與相對(duì)定位的區(qū)別：相對(duì)定位的百分比值，參考的是其父元素；位移的百分比值，參考的是其自身。
-
瀏覽器針對(duì)位移有優(yōu)化，與定位相比，瀏覽器處理位移的效率更高。
-
位移對(duì)行內(nèi)元素?zé)o效。
-
transform 可以鏈?zhǔn)骄帉?xiě)，例如：
transform: translateX(30px) translateY(40px); -
位移配合定位，可以實(shí)現(xiàn)元素水平垂直居中。
.box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_位移</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 水平位移 */
/* transform: translateX(50px); */
/* 垂直位移 */
/* transform: translateY(50px); */
/* 水平+垂直位移 */
transform: translate(50px,50px);
}
.inner2 {
width: 60px;
height: 60px;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
<div class="outer">
<div class="inner2">你好啊</div>
</div>
</body>
</html>
??2D縮放
transform不用在行內(nèi)元素，使用時(shí)需要添加display
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>縮放</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: pink;
transform: scaleY(1.5);
}
span {
/* 縮放不能用于行內(nèi)元素，所以需要轉(zhuǎn)換 */
display: inline-block;
font-size: 50px;
transform: scaleX(0.5);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
<span>好</span>
</body>
</html>
??2D旋轉(zhuǎn)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>旋轉(zhuǎn)</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateZ(-30deg);
/* transform: rotate(30deg); */
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
??2D扭曲
??多重變換
??變換原點(diǎn)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05_多重變換</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
/* 通過(guò)關(guān)鍵詞調(diào)整變換原點(diǎn) */
transform-origin: right bottom;
/* 通過(guò)具體像素值調(diào)整變換原點(diǎn) */
/* transform-origin: 50px 50px; */
/* 通過(guò)百分比調(diào)整變換原點(diǎn) */
/* transform-origin: 25% 25%; */
/* 只給一個(gè)值 */
/* transform-origin:top; */
/* transform-origin: right top; */
/* 變換原點(diǎn)位置的改變對(duì) 旋轉(zhuǎn) 有影響 */
/* transform: rotate(0deg); */
/* 變換原點(diǎn)位置的改變對(duì) 縮放 有影響 */
transform: scale(1.3);
/* 變換原點(diǎn)位置的改變對(duì) 位移 沒(méi)有影響 */
/* transform: translate(100px,100px) */
}
.test {
width: 50px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="test">你好啊</div>
</div>
</div>
</body>
</html>
??3D變換
??開(kāi)啟3D空間
??設(shè)置景深
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_3D空間與景深</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 開(kāi)啟3D空間 */
transform-style: preserve-3d;
/* 設(shè)置景深（有了透視效果，近大遠(yuǎn)?。?*/
perspective: 500px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(30deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
??透視點(diǎn)位置
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_透視點(diǎn)的位置</title>
<style>
.outer {
width: 200px;
height: 200px;
border: 2px solid black;
margin: 0 auto;
margin-top: 100px;
/* 開(kāi)啟3D空間 */
transform-style: preserve-3d;
/* 設(shè)置景深（有了透視效果，近大遠(yuǎn)?。?*/
perspective: 500px;
/* 設(shè)置透視點(diǎn)的位置 */
perspective-origin: 400px 102px;
}
.inner {
width: 200px;
height: 200px;
background-color: deepskyblue;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">你好啊</div>
</div>
</body>
</html>
??3D位移
??3D旋轉(zhuǎn)
3D 旋轉(zhuǎn)是在 2D 旋轉(zhuǎn)的基礎(chǔ)上，可以讓元素沿 x 軸和 y 軸旋轉(zhuǎn)，具體使用方式如下：
- 先給元素添加轉(zhuǎn)換屬性
transform - 編寫(xiě) transform 的具體值， 3D 相關(guān)可選值如下
??3D縮放
??多重變換
??背部可見(jiàn)性
??過(guò)渡
過(guò)渡可以在不使用 Flash 動(dòng)畫(huà)，不使用 JavaScript 的情況下，讓元素從一種樣式，平滑過(guò)渡為另一種樣式。
在線(xiàn)制作貝塞爾曲線(xiàn)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_過(guò)渡案例</title>
<style>
.outer {
width: 400px;
height: 224px;
position: relative;
overflow: hidden;
}
.mask {
width: 400px;
height: 224px;
background-color: black;
color: white;
/* 用定位實(shí)現(xiàn)遮罩蓋住效果 */
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 224px;
font-size: 100px;
/* 調(diào)透明度 */
opacity: 0;
transition: 1s linear;
cursor: pointer;
}
img {
transition: 0.5s linear;
}
.outer:hover .mask {
opacity: 0.5;
}
.outer:hover img {
transform: scale(1.6) rotate(20deg);
}
</style>
</head>
<body>
<div class="outer">
<img src="../images/shanghai.jpg" alt="">
<div class="mask">上海</div>
</div>
</body>
</html>
??動(dòng)畫(huà)
??什么是幀、關(guān)鍵幀
- 一段動(dòng)畫(huà)，就是一段時(shí)間內(nèi)連續(xù)播放 n 個(gè)畫(huà)面。每一張畫(huà)面，我們管它叫做“幀”。一定時(shí)間內(nèi)連續(xù)快速播放若干個(gè)幀，就成了人眼中所看到的動(dòng)畫(huà)。同樣時(shí)間內(nèi)，播放的幀數(shù)越多，畫(huà)面看起來(lái)越流暢。
- 關(guān)鍵幀指的是，在構(gòu)成一段動(dòng)畫(huà)的若干幀中，起到?jīng)Q定性作用的 2-3 幀。
??動(dòng)畫(huà)的基本使用
??step1：定義關(guān)鍵幀（定義動(dòng)畫(huà)），就相當(dāng)于定義函數(shù)
-
簡(jiǎn)單方式定義
/*寫(xiě)法一*/ @keyframes 動(dòng)畫(huà)名 { from { /*property1:value1*/ /*property2:value2*/ } to { /*property1:value1*/ } } -
完整方式定義
@keyframes 動(dòng)畫(huà)名 { 0% { /*property1:value1*/ } 20% { /*property1:value1*/ } 40% { /*property1:value1*/ } 60% { /*property1:value1*/ } 80% { /*property1:value1*/ } 100% { /*property1:value1*/ } }
??step2：給元素應(yīng)用動(dòng)畫(huà)（應(yīng)用函數(shù)），用到的屬性如下
.box {
/* 指定動(dòng)畫(huà) */
animation-name: testKey;
/* 設(shè)置動(dòng)畫(huà)所需時(shí)間 */
animation-duration: 5s;
/* 設(shè)置動(dòng)畫(huà)延遲 */
animation-delay: 0.5s;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>基本使用</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
/* 定義一個(gè)動(dòng)畫(huà)（定義一組關(guān)鍵幀）—— 第一種方式 */
@keyframes wangyoudong {
/* 第一幀 */
from {
}
/* 最后一幀 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定義一個(gè)動(dòng)畫(huà)（定義一組關(guān)鍵幀）—— 第二種方式 */
@keyframes wangyoudong2 {
/* 第一幀 */
0% {
}
/* 29% {
background-color: red;
} */
/* 48% {
background-color: orange;
} */
/* 88% {
background-color: yellow;
} */
/* 最后一幀 */
100% {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 應(yīng)用動(dòng)畫(huà)到元素 */
animation-name: wangyoudong2;
/* 動(dòng)畫(huà)持續(xù)的時(shí)間 */
animation-duration: 3s;
/* 動(dòng)畫(huà)延遲時(shí)間 */
animation-delay: 0.2s;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
??動(dòng)畫(huà)的其他屬性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02_其他屬性</title>
<style>
.outer {
width: 1000px;
height: 100px;
border: 1px solid black;
}
@keyframes atguigu {
from {
}
to {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
}
.inner {
width: 100px;
height: 100px;
background-color: deepskyblue;
/* 應(yīng)用動(dòng)畫(huà)到元素 */
animation-name: atguigu;
/* 動(dòng)畫(huà)持續(xù)的時(shí)間 */
animation-duration: 3s;
/* 動(dòng)畫(huà)延遲時(shí)間 */
animation-delay: 0.2s;
/* ********其他屬性--start*********** */
/* 設(shè)置動(dòng)畫(huà)的方式 */
animation-timing-function: linear;
/* 動(dòng)畫(huà)播放的次數(shù) */
animation-iteration-count: infinite;
/* 動(dòng)畫(huà)的方向 */
animation-direction: alternate;
/* 動(dòng)畫(huà)以外的狀態(tài)（不發(fā)生動(dòng)畫(huà)的時(shí)候在哪里） */
/* animation-fill-mode: forwards; */
}
.outer:hover .inner {
/* 動(dòng)畫(huà)的播放狀態(tài) */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
??動(dòng)畫(huà)復(fù)合屬性
??過(guò)渡與動(dòng)畫(huà)的區(qū)別
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04_動(dòng)畫(huà)與過(guò)渡的區(qū)別</title>
<style>
.outer {
width: 1000px;
height: 200px;
border: 1px solid black;
}
.inner {
width: 100px;
height: 100px;
}
/* 用過(guò)渡，實(shí)現(xiàn)inner1跑到右邊去 */
.inner1 {
background-color: orange;
transition: 3s linear;
}
.outer:hover .inner1 {
transform: translate(900px);
}
/* 用動(dòng)畫(huà)，實(shí)現(xiàn)inner2跑到右邊去 */
@keyframes atguigu {
0%{}
50%{
background-color: red;
border-radius: 50%;
box-shadow: 0px 0px 20px black;
}
100%{
transform: translate(900px);
}
}
.inner2 {
background-color: green;
animation: atguigu 3s linear infinite alternate forwards;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner inner1">過(guò)渡</div>
<div class="inner inner2">動(dòng)畫(huà)</div>
</div>
</body>
</html>
??動(dòng)畫(huà)案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>動(dòng)畫(huà)案例</title>
<style>
div {
width: 130px;
height: 130px;
background-image: url('../images/bike.png');
margin: 0 auto;
margin-top: 100px;
animation: bike 1s steps(31) infinite;
}
@keyframes bike {
from{}
to{
background-position: 0px -4030px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
??多列布局
??專(zhuān)門(mén)用于實(shí)現(xiàn)類(lèi)似于報(bào)紙的布局
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-604285.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01_多列布局案例</title>
<style>
.outer {
width: 1000px;
margin: 0 auto;
/* 直接指定列數(shù) */
/* column-count: 5; */
/* 指定每一列的寬度，會(huì)自動(dòng)計(jì)算列數(shù) */
/* column-width:220px ; */
/* 復(fù)合屬性，能同時(shí)指定列寬和列數(shù)（不推薦使用） */
columns: 4;
/* 調(diào)整列間距 */
column-gap: 20px;
/* 每一列的邊框?qū)挾?*/
/* column-rule-width: 2px; */
/* 每一列的邊框風(fēng)格 */
/* column-rule-style: dashed; */
/* 每一列的邊框顏色 */
/* column-rule-color: red; */
/* 邊框相關(guān)的復(fù)合屬性 */
column-rule: 2px dashed red;
}
h1 {
column-span: all;
text-align: center;
font-size: 50px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div class="outer">
<h1>《震驚！國(guó)際名模也來(lái)尚硅谷學(xué)前端了！》</h1>
<p>【開(kāi)始】唐僧師徒四人忙著趕路，吃不好、睡不好，走了幾天，來(lái)到一個(gè)景色迷人的萬(wàn)壽山五莊觀，見(jiàn)天色不早，就想在五莊觀里住上一晚。五莊觀里的兩個(gè)童子聽(tīng)說(shuō)他們是來(lái)自東土大唐要到西天取經(jīng)的，連忙說(shuō)∶“我家?guī)煾傅皆继熳鹉抢镏v經(jīng)去了，讓我們?cè)谶@里等您，請(qǐng)快快進(jìn)屋。”原來(lái)，這童子的師父是鎮(zhèn)元子，在五百年前的蘭盆會(huì)上認(rèn)識(shí)了唐僧前世金蟬子。臨走時(shí)曾告訴兩個(gè)童子要好好對(duì)待唐僧，并交待童子用觀里的兩顆寶貝人參果招待他。【結(jié)束】</p>
<img src="../images/start.jpg" alt="">
<p>【開(kāi)始】?jī)扇苏巳藚⒐?，趁著唐僧的徒弟不在，偷偷拿?lái)給唐僧吃。唐僧看見(jiàn)人參果就好像剛出生的嬰兒一樣，嚇得渾身發(fā)抖，使勁搖手不敢吃。兩個(gè)童子越是解釋說(shuō)∶“這是仙果，不是人！”唐僧仍是不信，讓他們趕快端走。兩個(gè)童子沒(méi)有辦法，只好端著人參果，回到房里。因?yàn)槟侨藚⒐荒芫梅?，否則吃下也不能長(zhǎng)壽，于是兩童子一人一個(gè)，分著吃了。說(shuō)來(lái)也巧，這間房子正好和廚房挨著，兩童子分吃人參果的事，八戒聽(tīng)得明明白白，看得清清楚楚，饞得直流口水，恨不得立刻吃一個(gè)?！窘Y(jié)束】</p>
<p>【開(kāi)始】一會(huì)兒，悟空放馬回來(lái)，八戒連忙把剛才的事情告訴了師兄。悟空早就聽(tīng)說(shuō)過(guò)人參果，只是沒(méi)有吃過(guò)，于是就按照八戒說(shuō)的，用了一個(gè)隱身的法術(shù)，偷偷溜進(jìn)道房，拿走了二童子摘果用的金擊子，露出了一顆人參果果，跑到后園去摘人參果。這人參果樹(shù)有一千多尺高，非常茂盛，朝南的枝頭上，露出了一顆人參果。悟空輕輕一跳一跳，跳上樹(shù)枝，用金擊子一敲，那果子就掉下來(lái)，悟空緊跟著跳下來(lái)，可是卻找不到那果子。悟空把果園里的土地神抓來(lái)，露出了一顆人參果，問(wèn)他為什么把人參果偷走。土地神告訴孫悟空，露出了一顆人參果，這寶貝樹(shù)三千年開(kāi)一次花，過(guò)三千年才結(jié)一次果，再過(guò)三千年才成熟，而且只結(jié)三十個(gè)果子，這果子很奇怪，碰到金屬就從枝頭落下，遇到土就鉆進(jìn)土里，打它時(shí)要用綢子接?！窘Y(jié)束】</p>
<p>【開(kāi)始】悟空送走土地神后，一手拿金擊子敲，一手扯著自己的衣服接了三個(gè)果子。悟空回到廚房后，讓八戒把沙僧叫來(lái)，三個(gè)人每人分一個(gè)。豬八戒性急，一口把果子吞下去，什么味道也沒(méi)有嘗出來(lái)，就想讓悟空再去偷幾個(gè)。悟空告訴他這人參果是一萬(wàn)年才結(jié)三十個(gè)果子，能吃到一個(gè)，就應(yīng)該滿(mǎn)足了，說(shuō)完就把金擊子放回了原處。豬八戒心里不高興，嘴里不停地說(shuō)，要是能再吃一個(gè)該有多好，不巧被兩童子聽(tīng)見(jiàn)了，慌忙跑到園子里去數(shù)，發(fā)現(xiàn)少了四個(gè)果子，想一定是被唐僧師徒四人偷吃了，就怒氣沖沖地來(lái)找唐僧講理，說(shuō)∶“你這些和尚，叫你吃，你不吃，為什么偏偏偷著吃？”【結(jié)束】</p>
<p>【開(kāi)始】剛開(kāi)始，悟空師兄三人怎么也不承認(rèn)偷吃了人參果，后來(lái)，經(jīng)唐僧的一番開(kāi)導(dǎo)，覺(jué)得確實(shí)是自己不對(duì)，就承認(rèn)偷吃了三個(gè)。兩個(gè)童子卻說(shuō)是四個(gè)，還罵了許多難聽(tīng)的話(huà)。悟空火了，拔了一根毫毛變成一個(gè)假悟空站在那挨罵，自己跳上云頭向后園飛去。悟空一進(jìn)果園，就拿出金箍棒一陣亂打，又使出自己的神力，把樹(shù)連根拔出，摔在地上，仙果從樹(shù)上掉下來(lái)，又碰到了土就全部鉆到土里去了?！窘Y(jié)束】</p>
<p>【開(kāi)始】悟空回到房中，收回毫毛，讓兩個(gè)童子隨便罵，也不還口。兩個(gè)童子見(jiàn)唐僧他們一句話(huà)也不說(shuō)，就想，是不是樹(shù)太高，葉子太密，自己數(shù)不清，又回到果園仔細(xì)看看。一到果園，見(jiàn)那情景，嚇得他們半死，趴在地上，放聲大哭∶“師父回來(lái)，可怎么說(shuō)呀！”兩個(gè)童子商量，先把唐僧留住，師父回來(lái)也好說(shuō)一些，于是回到房中，假說(shuō)果子一個(gè)也沒(méi)有少，是自己剛才數(shù)錯(cuò)了，請(qǐng)?zhí)粕麄冊(cè)彙！窘Y(jié)束】</p>
<p>【開(kāi)始】接著，他們給唐僧師徒們準(zhǔn)備了很多飯菜，趁他們吃飯時(shí)，關(guān)上門(mén)，又用一把大銅鎖，把門(mén)鎖上。孫悟空早就有了主意，等到夜深人靜的時(shí)候，用開(kāi)鎖法術(shù)，將一道道緊鎖的大門(mén)都打開(kāi)，拔毫毛變成兩個(gè)瞌睡蟲(chóng)，扔在童子臉上，兩童子便呼嚕地睡著了。唐僧師徒四人這才趁著黑夜逃出來(lái)，向西天趕路去了。天亮?xí)r鎮(zhèn)元子回到五莊觀，發(fā)現(xiàn)兩個(gè)童子被人施了法術(shù)，躺在那里睡大覺(jué)，連忙運(yùn)用神功把他們叫醒。二童子一見(jiàn)師父回來(lái)了，便急忙跪下，請(qǐng)師父原諒他們，并把唐僧師徒偷吃仙果，毀壞仙樹(shù)的事情告訴了師父。鎮(zhèn)元子想這一定是孫悟空干的，便去找孫悟空講理。【結(jié)束】</p>
</div>
</body>
</html>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-604285.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>多列圖片案例</title>
<style>
.outer {
column-count: 5;
}
img {
width: 100%;
transition: 0.2s linear;
}
img:hover {
box-shadow: 0px 0px 20px black;
transform: scale(1.02);
}
</style>
</head>
<body>
<div class="outer">
<img src="../images/img1.jpg">
<img src="../images/img2.jpg">
<img src="../images/img3.jpg">
<img src="../images/img4.jpg">
<img src="../images/img5.jpg">
<img src="../images/img6.jpg">
<img src="../images/img7.jpg">
<img src="../images/img8.jpg">
<img src="../images/img9.jpg">
<img src="../images/img10.jpg">
<img src="../images/img11.jpg">
<img src="../images/img12.jpg">
<img src="../images/img13.jpg">
<img src="../images/img14.jpg">
<img src="../images/img1.jpg">
<img src="../images/img2.jpg">
<img src="../images/img3.jpg">
<img src="../images/img4.jpg">
<img src="../images/img5.jpg">
<img src="../images/img6.jpg">
<img src="../images/img7.jpg">
<img src="../images/img8.jpg">
<img src="../images/img9.jpg">
<img src="../images/img10.jpg">
<img src="../images/img11.jpg">
<img src="../images/img12.jpg">
<img src="../images/img13.jpg">
<img src="../images/img14.jpg">
<img src="../images/img1.jpg">
<img src="../images/img2.jpg">
<img src="../images/img3.jpg">
<img src="../images/img4.jpg">
<img src="../images/img5.jpg">
<img src="../images/img6.jpg">
<img src="../images/img7.jpg">
<img src="../images/img8.jpg">
<img src="../images/img9.jpg">
<img src="../images/img10.jpg">
<img src="../images/img11.jpg">
<img src="../images/img12.jpg">
<img src="../images/img13.jpg">
<img src="../images/img14.jpg">
</div>
</body>
</html>
到了這里，關(guān)于前端 | （ 十二）CSS3簡(jiǎn)介及基本語(yǔ)法（中）| 變換、過(guò)渡與動(dòng)畫(huà) | 尚硅谷前端html+css零基礎(chǔ)教程2023最新的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
