- 當(dāng)前子專欄 基礎(chǔ)入門三大核心篇 是免費(fèi)開放階段。推薦他人訂閱，可獲取扣除平臺費(fèi)用后的35%收益，文末名片加V！
- 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費(fèi)開放，購買任意白寶書體系化專欄可加入TFS-CLUB 私域社區(qū)。
- 福利：除了通過訂閱"白寶書系列專欄"加入社區(qū)獲取所有付費(fèi)專欄的內(nèi)容之外，還可以通過加入星薦官共贏計(jì)劃 加入私域社區(qū)。
- 作者：不渴望力量的哈士奇(哈哥)，十余年工作經(jīng)驗(yàn), 跨域?qū)W習(xí)者，從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前任某金融品類App負(fù)責(zé)人。
- 榮譽(yù)：2022年度博客之星Top4、博客專家認(rèn)證、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者、新星計(jì)劃導(dǎo)師，“星薦官共贏計(jì)劃” 發(fā)起人。
- 現(xiàn)象級專欄《白寶書系列》作者，文章知識點(diǎn)淺顯易懂且不失深度；TFS-CLUB社區(qū)創(chuàng)立者，旨在以“賦能 共贏”推動(dòng)共建技術(shù)人成長共同體。
- ?? 白寶書系列
- ?? Python全棧白寶書
- ?? 產(chǎn)品思維訓(xùn)練白寶書
- ?? 全域運(yùn)營實(shí)戰(zhàn)白寶書
- ?? 大前端全棧架構(gòu)白寶書
上篇我們已經(jīng)學(xué)會了過渡的基本使用，也知道了 “transition” 有四個(gè)參數(shù)，接下來我們來詳細(xì)的學(xué)習(xí)一下 “transition” 的第三個(gè)參數(shù) - “緩動(dòng)參數(shù)” 。
?? 過渡
該章節(jié)的知識點(diǎn)，主要是圍繞 "過渡的緩動(dòng)效果" 來學(xué)習(xí)的。除了 "過渡的緩動(dòng)參數(shù)"、"貝塞爾曲線" 之外，還有一個(gè)實(shí)現(xiàn) “緩動(dòng)效果” 的小案例。
?? 過渡的緩動(dòng)參數(shù)
transition的第三個(gè)參數(shù)就是緩動(dòng)參數(shù)，也是變化速度曲線。
我們之前只用到了linear值，linear就是勻速運(yùn)動(dòng)，實(shí)際上除了linear，還有其他四個(gè)常用的緩動(dòng)參數(shù)：
上圖中的曲線就是css支持的變化速度曲線。
下面直接看例子：
通過例子可以看到不同的變化速度曲線，元素移動(dòng)的速度是不同的，但最終都是2s到達(dá)終點(diǎn)。
代碼如下：
<!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>
.box1 {
width: 1000px;
height: 600px;
border: 1px solid #000;
}
.box1 p {
width: 100px;
height: 100px;
background-color: orange;
position: relative;
left: 0;
transition: left 2s linear 0s;
}
.box1 p:nth-child(2) {
transition-timing-function: ease;
}
.box1 p:nth-child(3) {
transition-timing-function: ease-in;
}
.box1 p:nth-child(4) {
transition-timing-function: ease-out;
}
.box1 p:nth-child(5) {
transition-timing-function: ease-in-out;
}
.box1:hover p {
left: 800px;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
?? 貝塞爾曲線
我們也可以自定義動(dòng)畫緩動(dòng)參數(shù)，就是通過自定義貝塞爾曲線。
這個(gè)網(wǎng)站可以生成貝塞爾曲線：https://cubic-bezier.com/
進(jìn)入這個(gè)網(wǎng)站，拖動(dòng)左側(cè)的曲線，得到想要的貝塞爾曲線。
我們的緩動(dòng)參數(shù)就可以設(shè)置成這個(gè)貝塞爾曲線：大家可以實(shí)戰(zhàn)一下，觀察這個(gè)貝塞爾曲線下 元素的移動(dòng)效果。
?? 過渡效果實(shí)戰(zhàn)
案例一
我們在上網(wǎng)時(shí)經(jīng)常會看到鼠標(biāo)移動(dòng)到一個(gè)圖片時(shí)，底部浮現(xiàn)出現(xiàn)一行解釋的文字，這個(gè)效果是怎么實(shí)現(xiàn)的呢？
答：其實(shí)就是字被圖片壓蓋，當(dāng)鼠標(biāo)浮上去時(shí)，字再出現(xiàn)在圖片的上方；所有的壓蓋效果都需要使用絕對定位來實(shí)現(xiàn)。
下面我們就來做一個(gè)這樣的案例：第一步，使用絕對定位，給盒子下方添加文字；再次注意：絕對定位的盒子，不寫寬度無法自動(dòng)撐滿。
第二步：通過透明度屬性 opacity ，實(shí)現(xiàn)將鼠標(biāo)浮上去時(shí)，透明圖由0變成1。
第三步：利用過渡，讓透明度緩慢變化，實(shí)現(xiàn)文字慢慢浮現(xiàn)的效果。
我們在實(shí)現(xiàn)這個(gè)例子時(shí)，用到了 "浮動(dòng)"、"子絕父相對"、"過渡" 的知識點(diǎn)。"過渡"其實(shí)就寫了一條，相對來說來是比較簡單的，大家還是要多多練習(xí)實(shí)例，這樣才能更好的消化學(xué)到的知識。
案例二
我們在網(wǎng)頁中也經(jīng)常會看到一些有動(dòng)畫效果的小圖標(biāo)，比如下面這種鼠標(biāo)浮上去背景旋轉(zhuǎn)，同時(shí)圖標(biāo)也會放大，這種效果是怎么實(shí)現(xiàn)的呢？
用到的知識點(diǎn)有很多，例如浮動(dòng)、子絕父相、偽元素、旋轉(zhuǎn)變形、過渡等。接下來我們就來實(shí)現(xiàn)它。
第一步：實(shí)現(xiàn)網(wǎng)頁布局：
先來分析一下，四個(gè)圖標(biāo)處在四個(gè)盒子中，后面有一個(gè)藍(lán)色的圓的背景，鼠標(biāo)放到盒子上時(shí)，只有背景旋轉(zhuǎn)，圖片放大。背景圖片不是標(biāo)簽，是無法實(shí)現(xiàn)獨(dú)立旋轉(zhuǎn)的，如果旋轉(zhuǎn)盒子，圖標(biāo)也會跟著旋轉(zhuǎn)，我們可以給盒子添加一個(gè)偽元素，給偽元素添加背景圖片，旋轉(zhuǎn)也是由偽元素旋轉(zhuǎn)。
準(zhǔn)備四個(gè)背景圖片：
代碼如下：
第二步：利用變形 + 過渡實(shí)現(xiàn)動(dòng)畫效果。
大家一定要自己從頭到尾敲兩遍，只看是學(xué)不會的。
案例三
這個(gè)案例，我們利用3D旋轉(zhuǎn)，實(shí)現(xiàn)一個(gè)非常有意思的“翻蓋”的動(dòng)畫特效：
用到的知識點(diǎn)有 "子絕父相"、"3D旋轉(zhuǎn)"、"transform-origin屬性"（用來設(shè)置旋轉(zhuǎn)的原點(diǎn)，有兩個(gè)描述值，不用刻意記憶怎么設(shè)置，做的時(shí)候多嘗試幾次就知道了）
第一步：實(shí)現(xiàn)網(wǎng)頁布局
第二步：實(shí)現(xiàn)鼠標(biāo)觸碰時(shí)，上面的圖片進(jìn)行3D旋轉(zhuǎn)。第一個(gè)延左邊的軸打開。
第三步：將下面兩個(gè)也實(shí)現(xiàn)動(dòng)畫效果?？梢岳脤盈B的性質(zhì)設(shè)置。
案例四
接下來外面看一個(gè)酷炫的特效，正方體的旋轉(zhuǎn)，看起來非常有立體感：
第一步：利用3D旋轉(zhuǎn)和空間移動(dòng)，繪制一個(gè)正方體：
代碼如下：
<!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>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
perspective: 300px;
position: relative;
}
.box p {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.box p:nth-child(1) {
background-color: #e6aaaa;
/* 前面 */
transform: translateZ(100px);
}
.box p:nth-child(2) {
background-color: #aae6df;
/* 頂面 */
transform: rotateX(90deg) translateZ(100px);
}
.box p:nth-child(3) {
background-color: #f3a6de;
/* 背面 */
transform: rotateX(180deg) translateZ(100px);
}
.box p:nth-child(4) {
background-color: #84afef;
/* 下面 */
transform: rotateX(-90deg) translateZ(100px);
}
.box p:nth-child(5) {
background-color: #edef84;
/* 左面 */
transform: rotateY(90deg) translateZ(100px);
}
.box p:nth-child(6) {
background-color: #a6ef84;
/* 左面 */
transform: rotateY(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
第二步：使整個(gè)正方體進(jìn)行旋轉(zhuǎn)文章來源：http://www.zghlxwxcb.cn/news/detail-413909.html
需要放置一個(gè)新的“大舞臺”section，將上面的正方體的box當(dāng)作演員。而box既是p的舞臺，又是section的演員。需要做一個(gè)特殊設(shè)置：文章來源地址http://www.zghlxwxcb.cn/news/detail-413909.html
到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門三大核心之CSS篇?〗- 過渡的緩動(dòng)效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
