CSS3為網(wǎng)頁(yè)打造絲滑鼠標(biāo)效果

時(shí)間：2023-07-20 03:51:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-20 03:51:01 來源：網(wǎng)站運(yùn)營(yíng)

CSS3為網(wǎng)頁(yè)打造絲滑鼠標(biāo)效果：可能各位經(jīng)常能看到一個(gè)畫面：在一個(gè)網(wǎng)站首頁(yè)右下角的地方有兩個(gè)圖標(biāo)，分別是QQ和微信字樣，當(dāng)鼠標(biāo)劃入時(shí)，會(huì)在上方以極其流利的動(dòng)畫顯示出一個(gè)二維碼、或提示。

就像這樣：







而本文實(shí)現(xiàn)的就是這個(gè)效果！

---

html部分很簡(jiǎn)單 —— 就是一個(gè)div下包著的兩個(gè)a鏈接（section沒什么意義，請(qǐng)忽略它吧），每個(gè)a中都有一個(gè)圖標(biāo) —— 開始時(shí)顯示的圖標(biāo)，和一個(gè)span標(biāo)簽 —— 鼠標(biāo)移入時(shí)在周圍彈出的內(nèi)容。

<div class="container"> <section> <a href="javascript:void(0);"> <i class="iconfont icon-qq"></i> <span> <img src="img/qq.png" /> 優(yōu)C體驗(yàn)咨詢?nèi)? </span> </a> <a href="javascript:void(0);"> <i class="iconfont icon-wangzhan"></i> <span class="span_two"> <img src="img/hub.png" /> 優(yōu)C·技術(shù)封推 </span> </a> </section></div>這里用父子結(jié)構(gòu)的原因在于：要實(shí)現(xiàn)“緊跟著i圖標(biāo)周圍彈出內(nèi)容”需要用到 “父相子絕” 的position模式。

1. 所用圖標(biāo)來自 阿里圖標(biāo)庫(kù)iconfont，推薦大家在項(xiàng)目中使用它；

1. 其實(shí)原本筆者想直接用“偉大的”focus-within，它可以避開“父相子絕”的限制。但是它是focus系列，用在PC端總沒有hover流暢！

然后是css樣式：

從上演示可以看出：彈出框?qū)逆溄拥捻敳恳詣?dòng)畫彈出。這意味著你按本文代碼所示網(wǎng)頁(yè)底部bottom區(qū)域必須“足夠大”（或者不能有 overflow:hidden; ）—— 這是最基礎(chǔ)的。否則你的網(wǎng)頁(yè)將會(huì)很難看！

/** 這里為了方便演示將div居中 */div.container { display: inline-block; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}接下來，我們對(duì)鏈接進(jìn)行樣式設(shè)置，創(chuàng)建簡(jiǎn)單的背景懸停效果，并定位社交媒體圖標(biāo):

a { color: #fff; background: #8a938b; border-radius: 4px; text-align: center; text-decoration: none; position: relative; display: inline-block; box-sizing: border-box; padding: 12px; -o-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; -webkit-font-smoothing: antialiased;}a:hover { background: #5a665e;}.iconfont { font-size: 36px; vertical-align: middle; display: inline-block; position: relative; top: 20%;}接下來，我們將對(duì)彈出文本進(jìn)行樣式設(shè)置和動(dòng)畫處理:

a span { max-width: 200px; max-height: 147px; color: #666; position: absolute; bottom: 0; left: -30px; right: 0; padding: 10px 6px; z-index: -1; font-size: 11px; border-radius: 5px; background: #fff; visibility: hidden; opacity: 0; -o-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}a span.span_two { left: 0; right: -30px;}span img{ max-width: 100%; max-height: 100%; width: initial; height: initial;}/* 當(dāng)圖標(biāo)處于懸停狀態(tài)時(shí)，文本將彈出 */a:hover span { bottom: 70px; visibility: visible; opacity: 1;}

---

關(guān)于Cubic-Bezier曲線：

CSS3中的Cubic-Bezier曲線規(guī)定了元素運(yùn)動(dòng)的特殊性，它由四個(gè)點(diǎn)p0，p1，p2和p3定義。 p0點(diǎn)是曲線的起點(diǎn)，而p3點(diǎn)是曲線的終點(diǎn)。曲線越線性，運(yùn)動(dòng)就越僵硬(或不那么流暢)。

如果一個(gè)點(diǎn)一開始是正數(shù)，而下一個(gè)點(diǎn)是負(fù)數(shù)，那么運(yùn)動(dòng)一開始就會(huì)很慢。當(dāng)點(diǎn)值變得比之前的點(diǎn)值高時(shí)，運(yùn)動(dòng)加快。

這就是CSS中Cubic-Bezier點(diǎn)的含義。由于動(dòng)畫短，所以動(dòng)作很細(xì)微。彈出框從正方形底部開始時(shí)緩慢開始，然后開始加速到頂部。

---

做到這里，我們會(huì)發(fā)現(xiàn)文首的效果圖中彈出框下有兩個(gè)小三角用來“指引”，這個(gè)其實(shí)非常經(jīng)典 —— transparent的應(yīng)用！

transparent：透明。被規(guī)定的元素的color或background-color將不再擁有自身顏色，在效果上看就像“沒有了”一樣。它和display等屬性的區(qū)別在于 —— 它可以使一個(gè)元素的某一部分“消失不見”，而不用像早期那樣用各種背景色去適配！

a span::before { content: ''; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff; position: absolute; bottom: -4px; left: 68px; right: auto;}a span.span_two::before { left: auto; right: 68px;}它的作用原理就是 —— 一個(gè)div的上下左右邊框是可以分別操控的、是獨(dú)立的（它不是四個(gè)方形）：







（width和height為0，border分別為20px、不同顏色下渲染效果。）

最后，我們發(fā)現(xiàn)上面運(yùn)用了大量的hover，但是移動(dòng)端它不支持hover啊，它會(huì)導(dǎo)致類似click一樣的300ms延遲效果。這對(duì)用戶體驗(yàn)來說是不友好的：

@media (any-hover: none) { a:focus { background-color: #5a665e; }}@media (any-hover: none) { a:focus span { bottom: 70px; visibility: visible; opacity: 1; }}

any-hover：可用于測(cè)試是否有任意可用的輸入裝置可以hover懸停在元素上的CSS媒體屬性。例如鼠標(biāo)這個(gè)輸入裝置就可以控制cursor手形的位置，以及hover在元素上；例如手機(jī)都是手指控制，沒有什么懸停感應(yīng)，因此，沒有裝置可以hover懸停（雖然手指也能觸發(fā):hover偽類效果）。因此，any-hover媒體查詢簡(jiǎn)介可以用來精確控制不同設(shè)備上的hover交互行為，尤其對(duì)于跨平臺(tái)的網(wǎng)頁(yè)，響應(yīng)式網(wǎng)站，非常有用。
語法：

1. none：沒有什么輸入裝置可以實(shí)現(xiàn)hover懸停，或者沒有可以指向的輸入裝置。

1. hover：有至少一個(gè)輸入裝置可以觸發(fā)元素的hover懸停交互。

---

當(dāng)然，本文的效果用純粹的 opacity / visibility + translate + scale 也可以完美實(shí)現(xiàn)，不過...有現(xiàn)成的東西，干嘛不用呢？

---

前兩天筆者就在項(xiàng)目中給“翻轉(zhuǎn)動(dòng)畫”增加了一個(gè)3D效果，看起來賊爽：







這個(gè)動(dòng)畫實(shí)現(xiàn)所用到的3D盒子模型是現(xiàn)在3D模型中最常用的一個(gè) —— 不過我們先拿其中兩個(gè)面分析：

1. 首先，要實(shí)現(xiàn)這個(gè)功能，我們從外往里看：把文字所在部分看作一個(gè)盒子的話，前后兩個(gè)橫線并不屬于這個(gè)盒子才對(duì)，那么，很自然就想到了—— ::after 和 ::before 偽元素；
2. 其次，兩個(gè)文字分別在兩個(gè)div上，那么就需要有一個(gè)可以附帶 overflow: hidden 的盒子 —— 不能加到上面的盒子中，因?yàn)閍fter和before不屬于div！
3. 最后是兩個(gè)元素的翻轉(zhuǎn)效果：我們需要知道的是，為了性能考慮，我們最好是對(duì)整個(gè)盒子進(jìn)行翻轉(zhuǎn)，而不是對(duì)兩個(gè)文字div附加動(dòng)畫

事實(shí)上，transform動(dòng)畫中的屬性表示的含義更多的是“過渡多少”而不是“過渡到哪里”！

那么，這個(gè)層級(jí)關(guān)系就很明了了：

<!--偽元素裝飾盒子--><div class="pic_border"> <!--overflow-hidden盒子--> <div class="pic_box"> <!--transition過渡盒子--> <div class="pic_item"> <div class="pic_text">music</div> <div class="pic_back">此時(shí)此刻，非我莫屬</div> </div> </div></div>按照上面所說，我們很容易為它添加對(duì)應(yīng)的CSS：

.pic_border{ position: relative;}.pic_border::before{ content: ''; position: absolute; top: 50%; left: 0; width: 43vw; height: 1px; background-color: red;}.pic_border::after{ content: ''; position: absolute; top: 50%; right: 0; width: 43vw; height: 1px; background-color: red;}@media screen and (max-width: 1100px) { .pic_border::before,.pic_border::after{ width: 20vw; }}.pic_box{ display: inline-block; height: 70px; margin-left: calc(50% - 70px); overflow: hidden; perspective: 2000px; cursor: pointer; user-select: none;}.pic_item{ width: 100%; height: 100%; transform-style: preserve-3d; transition: all .7s ease;}.pic_text,.pic_back{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}.pic_text{ transform: rotateX(0deg) translateZ(-21.9px);}.pic_back{ transform: rotateX(90deg) translateZ(-15px);}.pic_box:hover .pic_item{ transform: rotateX(-90deg);}.pic_box:active .pic_item{ transform: rotateX(-90deg);}需要注意的是：3D效果是一定要有Z軸參與的！ 不然會(huì)顯得很“尷尬“

---

我組建了一個(gè)前端自學(xué)團(tuán)，學(xué)習(xí)前端技術(shù)。在團(tuán)里，會(huì)嚴(yán)格監(jiān)督大家每天學(xué)習(xí)打卡，給大家分享學(xué)習(xí)資料，給大家匹配學(xué)習(xí)伙伴，定期組織大家進(jìn)行項(xiàng)目實(shí)戰(zhàn)。想要加入一起學(xué)習(xí)的小伙伴可以私信我或是給我留言

作者：koaxios

鏈接：CSS3為網(wǎng)頁(yè)打造絲滑鼠標(biāo)效果