創作不易 拒絕白嫖 點個贊唄
關注專欄 學透CSS,帶你走進CSS的深處！！！
前言
學以致用 [xué yǐ zhì yòng]
學以致用，漢語成語，拼音是xué yǐ zhì yòng，意思是為了實際應用而學習，出自《為有源頭活水來》，
學習一門編程語言，不僅僅是學習他的語法，而是要將它應用到具體的場景中去，只有這樣才能更好的從入門到精通，
對于CSS來說，由于CSS的特殊性，導致它的學習不能局限于眼觀，而是要放到真是的DOM中才能更好的體會具體屬性的具體價值，
在之前的文章box-shadow我們學習了box-shadow的用法，今天我們就用這個屬性來撰寫一個小小的例子，實作一個手風琴懸停的效果，
在開始之前我們先再簡單的回憶一下box-shadow的用法.
box-shadow:offset-x offset-y blur spread color position;
x-offset 在 x 軸上的位置，正值將陰影向右移動，負值將陰影向左移動，（必需的）
y-offset y 軸上的位置，正值將陰影移動到底部，負值將陰影移動到頂部，（必需的）
blur 陰影應該有多少模糊，值越高，陰影越柔和，默認情況下，該值設定為 0px，表示沒有模糊，（可選的）
spread 指定陰影的延伸尺寸，值越大，增加的越多，（可選的）
color陰影應該有什么顏色，默認值為文本顏色，（可選）
inset 陰影的位置，默認情況下，陰影在框外，設定插圖將其移至內部，（可選的）
使用variables定義顏色
為啥會考慮使用變數：
1.因為同一顏色會被多次使用
2.因為之前學習過CSS變，這里就是要學以致用，
這里為了更清晰我們定義在:root上：
紅 橙 黃 綠 藍 背景白
--background:#fff;
--red: #e74c3c;
--orange: #ff9c55;
--yellow:#f1c40f;
--green: #1fc11b;
--blue: #22d2a0;
下面具體的開始：
創建卡片
創建一個div
<div class="card">
<p>手風琴懸停效果</p>
</div>
這里我給他加了一個border的邊框，
border: 3px solid var(--red);
添加shadow
最終的效果是這樣子的，看上去是加了4個shadow，但是大家仔細考慮一下，僅僅是4個夠用嗎，
先來看一下僅僅4個陰影的效果：
box-shadow: 10px -10px var(--orange), 20px -20px var(--yellow),、30px -30px var(--green), 40px -40px var(--blue);
可以清除的看到，陰影之間并沒有白色的部分，所以，再整個里面外圍，我們是需要8個陰影的，
我們是在每個陰影之間加上了一個白色的陰影，并且使用了spread屬性，將陰影回撤3px,這樣看上去就有4個3px的陰影了！
box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
30px -30px 0 -3px var(--background), 30px -30px var(--green),
40px -40px 0 -3px var(--background), 40px -40px var(--blue);
添加hover效果
hover的時候我們需要做的是啥呢，是不是需要把所有的陰影識訓，怎么識訓呢，很簡單，把所有的陰影都去掉不就了，
并且為了影片的連續性，我們使用
transition: box-shadow 1s；
這樣有人就會考慮了：直接將box去掉就可以了，
.card:hover {
box-shadow:none;
}
transition: box-shadow 1s, top 1s, left 1s;
大家可以看下下圖的效果，在回收的時候是不是陰影越來越淡，并不符合手風琴的效果的，
這里我們其實主要把偏移變成0就可以了，
box-shadow: 0 0 0 -3px var(--background), 0 0 0 0 var(--orange),0 0 0 -3px var(--background), 0 0 0 0 var(--yellow),
0 0 0 -3px var(--background), 0 0 0 0 var(--green),
0 0 0 -3px var(--background), 0 0 0 0 var(--blue);
這里我們可以看到手風琴的陰影在回收的時候一直都是存在的，
并且是往最前面的紅色回收的，如果我們想要往最里面的藍色回收呢，大家看可以思考一下，文末會放出答案，
往里回收
transition: box-shadow 1s, top 1s, left 1s;
position: relative;
top: 0;
left: 0;
.card:hover {
top: -40px;
left: 40px;
}
完整代碼
因為參加更文活動的限制，只能圖片了!!!
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/298414.html
標籤：其他