使用CSS3 Cubic-Bezier創(chuàng)建動(dòng)畫鏈接懸停效果
html部分
<section><a href="#"><i class="fab fa-instagram">i><span>Instagramspan>a><a href="#"><i class="fab fa-github">i><span>Githubspan>a>section></div>當(dāng)您將鼠標(biāo)懸停在鏈接上時(shí)，span標(biāo)簽將成為彈出框。接下來，我們進(jìn)入css。 css樣式和動(dòng)畫
我們將div容器居中，以使兩個(gè)鏈接在屏幕上居中。這也使對小彈出框進(jìn)行動(dòng)畫處理變得容易，因?yàn)樗鼈儗逆溄拥捻敳繌棾觥?/span> 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%);}接下來，我們對鏈接進(jìn)行樣式設(shè)置，創(chuàng)建簡單的背景懸停效果，并定位社交媒體圖標(biāo)。 a {color:#fff;background: #8a938b;border-radius:4px;text-align:center;text-decoration:none;position: relative;display: inline-block;width: 120px;height: 100px;padding-top:12px;margin:0 2px;-o-transition:all .5s;-webkit-transition: all .5s;-moz-transition: all .5s;transition: all .5s;-webkit-font-smoothing: antialiased;}a:hover {background: #5a665e;}i{font-size: 45px;vertical-align: middle;display: inline-block;position: relative;top: 20%;}接下來，我們將對彈出文本進(jìn)行樣式設(shè)置和動(dòng)畫處理。 a span {color:#666;position:absolute;font-family: 'Chelsea Market', cursive;bottom:0;left:-15px;right:-15px;padding: 15px 7px;z-index:-1;font-size:14px;border-radius:5px;background:#fff;visibility:hidden;opacity:0;-o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);-moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}/* 當(dāng)圖標(biāo)處于懸停狀態(tài)時(shí)，文本將彈出 */a:hover span {bottom: 130px;visibility:visible;opacity:1;}CSS3 Cubic-Bezier曲線由四個(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í)緩慢開始，然后開始加速到頂部。 盡管您可以創(chuàng)建沒有Cubic-Bezier曲線過渡的動(dòng)畫，但動(dòng)畫的差異如下： 可以看到，動(dòng)畫為懸停效果增添了生氣。 最后一組CSS涉及樣式化彈出框底部的小箭頭。要了解有關(guān)在CSS中如何制作三角形的更多信息，請查看此CSS技巧文章。 總結(jié)
我們創(chuàng)建了一個(gè)簡約的按鈕樣式鏈接。鏈接具有基本的背景懸停效果，但我們并沒有止步于此。我們添加了一個(gè)小彈出框來顯示鏈接的文本。在CSS3 Cubic-Bezier塞爾曲線的幫助下，動(dòng)畫流暢且令人愉悅。 這類知識非常有用，可以作為你顯示社交媒體帳戶的網(wǎng)站設(shè)計(jì)的一部分。 本文示例演示和完整代碼請?jiān)L問如下地址，建議PC端打開?https://coding.zhanbing.site 本文完~
最后
歡迎加我微信(winty230)，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
點(diǎn)個(gè)在看支持我吧
評論
圖片
表情
<b id="afajh"><abbr id="afajh"></abbr></b>